更改导入的svg文件的填充颜色

让我说我正在使用SVG文件作为图标。一个复杂的图纸，与外边框更改导入的svg文件的填充颜色

<svg x="0" y="0" 
    width="425.197px" height="425.197px" viewBox="0 0 425.197 425.197"> 
    <image id="logo" x="0" y="0" width="425.197px" height="425.197px" xlink:href="logo.svg"/> 
    <image id="border" x="0" y="0" width="425.197px" height="425.197px" xlink:href="logo-border.svg"/> 
</svg>

我可以很容易地隐藏在悬停边界：

svg:hover image#border { 
    display: none; 
}

但我不能够改变填充颜色：

svg:hover image#logo { 
    fill: #FFFFFF; 
}

有没有办法或应该改变我的导入方法（使用object，iframe，...）？

来源

2013-10-18 muxisar

把悬停逻辑映像文件本身它应该是这样的......

#logo { 
    fill: #FFFFFF; 
}

然后也变化从<image>要么和或<object>为<image>标签不接收指针事件。

基本上，如果你想象什么位图图像是有能力的，那么SVG图像能够具有相同的功能。由于png或gif图像不是交互式的，因此SVG图像也不会互相影响，因此您的图像能力的心智图不会受到影响。

来源

2013-10-18 11:04:56

是的，我可以那样做，谢谢。但是用这种方法我不能使用'：hover'，或者我没有办法。 – muxisar

我做了一个测试。如果你打开这个svg文件：（[http://muxisar.at/pics/PA93G.svg](http://muxisar.at/pics/PA93G.svg）），你会看到悬停时的背景变化。当[文件包含在' muxisar

下面是一个svg文件中'：hover'规则的例子：http://xn--dahlstrm-t4a.net/svg/interactivity/hover-change-fill.svg –

更改导入的svg文件的填充颜色

回答

相关问题