问题描述:

I have an SVG image element in my code.

<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>

The image mail-dark.png is "Black" in color now.

I need to change its color. For example say to "green".I have tried using css as

<style>

#svg_social-link {

fill: green;

}

</style>

But its not worked. Is there any way to do this.

网友答案:

AFAIK, You can not change the background color in a SVG image, you could do it if the image is the HTML code (out of SVG).

However you could do it in SVG with a workaround, using a rect as background:

<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>

You can set the bk color inline or modify it using JS or CSS

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

I created JSFiddle: http://fiddle.jshell.net/7dcnZ/1/ To show it

相关阅读:
Top