如何更改悬停时SVG图像的颜色？

Question

可能重复：
Changing SVG image color with javascript

我想，当我在它悬停改变SVG图像的填充。

现在我有从Illustrator导出到SVG黑色问号。 我可以把我的网页与img标签，它显示很好，但我不知道如何更改代码中的颜色。

Answer 1

SVG文件可以被修改直接从JavaScript，即“图像”的属性可以从DOM内访问。

看看这个帖子从堆栈溢出：modify stroke and fill of svg image with javascript

要记住，这样做是很重要的，你不能封闭SVG文件中常见的HTML * < IMG/> *标记，使用而不是* < SVG> * ... **如在后示出< /SVG>。

编辑：svg on w3schools

我添加了一个链接到W3Schools的，所以你可以看到SVG对象的多个属性

乐趣

Answer 2

如果你可以发布您的代码，也许我们可以解决它。

尝试以下这样：http://tutorials.jenkov.com/svg/svg-and-css.html

可选择地（并非仅限于SVG），使用具有不同的图像这种类型的代码：

<img src="image1.svg" 
onmouseover="this.src='image2.svg'" 
onmouseout="this.src='image1.svg'"> 

现场演示：http://jsfiddle.net/JNChw/

Answer 3

如果您需要做的SVG悬停效果你不应该使用< img>标签。改为使用iframe>，< object>或<嵌入>标记引用svg。如果你想保存一个http GET请求，你可以把svg标记内联在html文档中。

下面是一个显示简单填充悬停效果的示例inside an svg和another one（稍微复杂一点，它使用过滤器在悬停时创建轮廓）。无论如何，它基本上是应用：悬停CSS规则来设置填充颜色。

与所有的使用SVG的上述方式的一个例子可以看出here。