使用 scss 变量的 SVG 着色

Question

我想使用 SVG 图像并使用诸如 $blue 之类的 scss 变量对其进行着色。

如果我将 SVG 代码粘贴到 HTML 中，它可以正常工作。但我将使用多个这样的 SVG 文件，而且我不希望我的 HTML 文件看起来很复杂。

所以我尝试使用其他方式，例如直接粘贴 SVG url 并在 SVG 文件中定义颜色变量。

https://codepen.io/cankilic-gh/pen/xxxKOGZ

HTML

<!-- EXAMPLE 1 -->
<svg id="triangle" width="448" height="414" viewBox="0 0 448 414" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
        d="M137.784 50.1096C176.303 -16.54 272.529 -16.4973 310.989 50.1865L434.102 263.644C472.563 330.328 424.413 413.64 347.433 413.606L101.017 413.496C24.0365 413.462 -24.039 330.107 14.4807 263.458L137.784 50.1096Z"
        fill="url(#triangle-grad)" />
  <defs>
    <linearGradient id="triangle-grad" x1="0.911862" y1="206.877" x2="447.627" y2="206.877"
                    gradientUnits="userSpaceOnUse">
      <stop class="stop1" offset="0%" />
      <stop class="stop2" offset="100%" />
    </linearGradient>
  </defs>
</svg>

<!-- EXAMPLE 2 -->

<div id="svg"></div>

<!-- EXAMPLE 3 -->

<img src="assets/images/triangle-md-a.svg" alt="">

SCSS

$purple:hsl(297, 28%, 38%);
$green:hsl(176, 59%, 48%);

svg path {
fill: url(#triangle-grad);
}

#triangle-grad .stop1 {
  stop-color: $purple;
}

#triangle-grad .stop2 {
  stop-color: $green;
}

/* Example 2 & 3 Paste this same classes in to SVG files <defs>*/

#svg {
  background-image: url(/assets/images/triangle-md-a.svg);
}

当我尝试像 SVG 导入这样的方法时，$purple 或 $green 不起作用。

如果我将 SVG 粘贴到 HTML 中并将这些样式移动到我的 scss 文件中，它就可以工作。

我也尝试了 css 变量，但它也需要 HTML 中的 SVG 代码。

在 HTML 中使用单行 SVG 并使用 SCSS 变量更改其渐变停止颜色的最佳方法是什么？

谢谢

Answer 1

.. 将使用多个 SVG，我不希望我的 HTML 文件看起来很复杂。

<defs> 的 ID 在 document 中必须是唯一的，所以你不能只打多个 SVG

解决它的一种现代方法是生成带有 自定义元素的 SVG客户端，
所有现代浏览器都支持。
无需附加 shadowDOM，您的所有 CSS 都会应用于创建的 SVG

声明一次自定义元素<svg-icon>，则所需的所有HTML是：

<svg-icon id="ONE" shape="triangle"></svg-icon>
<svg-icon id="TWO" shape="rect"></svg-icon>
<svg-icon shape="triangle"></svg-icon>

未完成，但正在运行，可帮助您入门的 SVGElement 代码：

<style>
  svg {
    width: 150px;
    background: grey;
    vertical-align: top;
  }
  [shape] .stop1 { stop-color: yellow }
  #ONE .stop2 { stop-color: darkgreen }
  #TWO .stop2 { stop-color: blue  }
  svg-icon:not([id]) .stop2 { stop-color: red }
</style>

<svg-icon id="ONE" shape="triangle"></svg-icon>
<svg-icon id="TWO" shape="rect"></svg-icon>
<svg-icon shape="triangle"></svg-icon>

<script>
  customElements.define("svg-icon", class extends HTMLElement {
    connectedCallback() {
      let shape = {
        "triangle": "M7.5 4.5c2-4 7-4 9 0l6 10c2 4-1 8-5 8l-12 0c-4 0-6-4-4-8l6-10z",
        "rect": "M4 4h16v16h-16z"
      }[this.getAttribute("shape")];
      this.innerHTML = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="${shape}" fill="url(#Gradient${this.id})"/>
<defs>
<linearGradient id="Gradient${this.id}">
<stop class="stop1" offset="0%"/><stop class="stop2" offset="100%"/>
</linearGradient>
</defs>
</svg>`}})
</script>