Question

我的代码中有一个SVG图片元素。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image id="svg_social-link" x="20" y="20" width="17" height="17" xlink:href="mail-dark.png" />
</svg>

现在mail-dark.png中的图片color为“黑色”。我需要更改其color。例如说“绿色”。我尝试使用css作为

<style>
#svg_social-link { 
    fill: green;
}
</style>

但它不起作用。有没有办法做到这一点。

Answer 1

AFAIK，您无法更改SVG图像中的背景颜色，如果图像是HTML代码（SVG外），则可以执行此操作。

但是你可以在SVG中使用rect作为背景来解决这个问题：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="20" y="20" width="17" height="17" id="bk_rect" style="fill:#800000;"/>
    <image id="svg_social-link" x="20" y="20" width="17" height="17" xlink:href="mail-dark.png" />
</svg>

您可以设置内联的bk颜色或使用JS或CSS

进行修改

$('#bk_rect').css('fill', '#aaaaaa');

我创建了JSFiddle：http://fiddle.jshell.net/7dcnZ/1/要显示它

如何更改嵌入的SVG图像的颜色

1 个答案: