在 svg 中插入 SCSS(sass) 变量以更改颜色答案

【问题标题】：Interpolate an SCSS(sass) variable inside an svg to change color在 svg 中插入 SCSS(sass) 变量以更改颜色
【发布时间】：2019-06-22 18:59:30
【问题描述】：

我正在尝试通过更改 svg 背景颜色来设置元素状态的动画。

为了更简单，我尝试在 SVG 中插入一个 SCSS(Sass) 变量 #{$scss-variable}。

当然不能正常工作，之前可能需要某种形式的编码，所以我正在寻找可以做到这一点的 scss 函数。

.span {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%
    2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%
    20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A@**#{$scss-variable}**%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M25
    5.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%20
    4.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c
    3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");

}

<span>aas</span>

【问题讨论】：

标签： css svg sass

【解决方案1】：

我会在扩展后通过 Illustrator 导出 SVG。 Here's an example of how to do that.

创建 SVG 后，您可以将其添加到 HTML 中，方法是将 SVG 元素直接包含在 HTML 中，或者使用图像标签呈现（我通常将其直接放入 HTML）。

SVG 由矢量形状组成。这些形状称为<circle>、<line>、<square> 或<paths>。

要更改路径的颜色，您需要做的就是使用 CSS 定位它并更改元素的 fill 属性。如果要更改元素的外层，请编辑 stroke 和 stroke-width 属性。

如果你想为颜色变化设置动画，你可以使用keyframe animations as shown here来实现。

【讨论】：