Question

我在文件中加载了SVG，如此标记......

<img class="svgbutton" src="filepath/icon.svg">

svg只是一个单一颜色的简单图标。是否可以使用css或javascript来控制svg的颜色（可能是过滤器？）？

或者是唯一正确的方法来在脚本中完全绘制它。？

Answer 1

我建议在HTML中使用这样的内联SVG：

<div style="color: red;">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        [ ... ]
    </svg>
</div>

通过这样做，您可以使用标准CSS（如果需要动态更改，则可以使用JavaScript，但请记住，存在用于设置鼠标悬停的伪类等等）。这里的技巧是将继承的CSS color应用于fill: currentColor;

的SVG填充颜色

<style type="text/css">
    svg {
        fill: currentColor;
    }
</style>

你也可以将多个符号保持在一起，隐藏整个＆＃34;集合＆＃34;在display: none;元素上使用CSS <svg ...>，并在多个位置单独重复使用这些符号。

＆＃34;集合中的符号定义＆＃34;：

<g id="icon1">
    <path class="path1" d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path>
</g>

在任何地方使用它：

<svg viewBox="0 0 64 64">
    <use xlink:href="#icon1"></use>
</svg>

注意：自{SVG 2.0}起，xlink:href已被弃用，并且正被href取代，但您的浏览器可能尚未支持这些内容...

您还可以对一个符号中的多个路径进行不同的着色：

<style type="text/css">
    .path1 {
        color: blue;
        fill: currentColor;
    }
</style>

继续尝试使用类和pseudo-classes，然后选择JavaScript来动态更改元素的类，因为它可能没有必要。

Answer 2

这可能需要一些Javascript或Jquery，通常有点棘手。

我能想到的最简单的方法是 CSS 代码：

.element {
    -webkit-mask: url(yourimage.svg) center / contain no-repeat;
    background: red;
}

然而，有些浏览器不支持这种情况，但是有后备。

更改从文件加载的SVG的颜色

2 个答案: