Javascript 如何在悬停时更改 SVG 图像的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12155374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change the color of an SVG image on hover?
提问by Kenmore
Possible Duplicate:
Changing SVG image color with javascript
I'd like to change the fill of an SVG image when I hover over it.
当我将鼠标悬停在 SVG 图像上时，我想更改它的填充。
Right now I have a black question mark exported from Illustrator to SVG. I can put on my page with the img tag and it displays fine, however I have no idea how to change the color in code.
现在我有一个从 Illustrator 导出到 SVG 的黑色问号。我可以将带有 img 标签的页面放在我的页面上并且显示正常，但是我不知道如何更改代码中的颜色。
采纳答案by danie7L T
SVG Files can be modified directly from javascript, i.e. properties of the "image" are accessible from within the DOM.
SVG 文件可以直接从 javascript 修改，即“图像”的属性可以从 DOM 中访问。
Look at this post from stack overflow: modify stroke and fill of svg image with javascript
从堆栈溢出看这篇文章：用javascript修改svg图像的笔触和填充
It's important to remember that to do so, you cannot enclose the svg file in the common HTML <img/>tag, use instead the <svg>...</svg> as shown in the post.
重要的是要记住，要这样做，您不能将 svg 文件包含在常见的 HTML < img/>标签中，而是使用 < svg>... </svg> 如帖子中所示。
EDIT: svg on w3schools
I added a link to w3schools so you can see more properties of the svg object
我添加了一个指向 w3schools 的链接，以便您可以看到 svg 对象的更多属性
Have Fun
玩得开心
回答by Erik Dahlstr?m
If you need to do hover effects in svg you shouldn't use <img> tags. Instead reference the svg with an <iframe>, <object> or <embed> tag. If you want to save a http GET request you can put the svg markup inline in the html document.
如果你需要在 svg 中做悬停效果，你不应该使用 <img> 标签。而是使用 <iframe>、<object> 或 <embed> 标记引用 svg。如果要保存 http GET 请求，可以将 svg 标记内联到 html 文档中。
Here's an example showing a simple fill hover effect inside an svg, and another one(slightly more complex that creates an outline on hover using a filter). Anyway, it's basically about applying a :hover CSS rule to set the fill color.
这是一个示例，显示了svg 内的简单填充悬停效果，以及另一个（稍微复杂一些，使用过滤器在悬停时创建轮廓）。无论如何，它基本上是关于应用 :hover CSS 规则来设置填充颜色。
An example with all of the above ways of using svg can be seen here.
可以在此处查看上述所有使用 svg 方法的示例。
回答by ionFish
If you can post your code, maybe we can troubleshoot it for you.
如果您可以发布您的代码，也许我们可以为您排查问题。
Try following this: http://tutorials.jenkov.com/svg/svg-and-css.html
尝试按照这个：http: //tutorials.jenkov.com/svg/svg-and-css.html
Alternatively (not exclusive to SVG), use this type of code with different images:
或者（不是 SVG 独有的），对不同的图像使用这种类型的代码：
<img src="image1.svg"
onmouseover="this.src='image2.svg'"
onmouseout="this.src='image1.svg'">
Live demo: http://jsfiddle.net/JNChw/
现场演示：http: //jsfiddle.net/JNChw/
