我正在尝试通过更改 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>
我会在
扩展SVG后通过Illustrator导出SVG。下面是如何执行此操作的示例。
创建 SVG 后，您可以通过将 SVG 元素直接包含在 HTML 中或使用图像标签呈现它（我通常将其直接放入 HTML 中）将其添加到 HTML 中。
SVG 由矢量形状组成。这些形状被称为<circle>、<line>、<square>或<paths>。
要更改路径的颜色，您需要做的就是使用 CSS 定位它并更改元素的 fill 属性。如果要更改元素的外衬，请编辑stroke和stroke-width属性。
如果要对颜色变化进行动画处理，可以使用关键帧动画执行此操作，如下所示。