Question

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

为了更加容易，我尝试在SVG内插一个SCSS（Sass）变量#{$scss-variable}。

当然，这是行不通的，probabilly之前需要某种形式的编码，所以我正在寻找可以做到这一点的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>

Answer 1

展开后，我将通过Illustrator导出SVG。 Here's an example of how to do that.

一旦创建了SVG，您就可以通过将SVG元素直接直接包含在HTML中或使用图像标签对其进行渲染（通常将其直接放入HTML中）来将其添加到HTML中。

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

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

如果要设置颜色变化的动画，可以使用keyframe animations as shown here。

在svg内插一个SCSS（sass）变量以更改颜色

1 个答案: