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

Question

可能重复：
使用 javascript 更改 SVG 图像颜色

当我将鼠标悬停在 SVG 图像上时，我想更改它的填充。

现在我有一个从 Illustrator 导出到 SVG 的黑色问号。我可以用 img 标签放在我的页面上，它显示得很好，但是我不知道如何更改代码中的颜色。

Answer 1

如果你需要在 svg 中做悬停效果，你不应该使用 <img> 标签。而是使用 <iframe>、<object> 或 <embed> 标签引用 svg。如果要保存 http GET 请求，可以将 svg 标记内嵌在 html 文档中。

这是一个示例，显示了svg中的简单填充悬停效果，以及另一个（稍微复杂一点，使用过滤器在悬停时创建轮廓）。无论如何，它基本上是关于应用 :hover CSS 规则来设置填充颜色。

可以在此处查看所有上述使用 svg 的方式的示例。

Answer 2

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

从堆栈溢出看这篇文章：用javascript修改svg图像的描边和填充

重要的是要记住，要这样做，您不能将 svg 文件包含在通用 HTML < img/>标记中，而是使用 < svg> ... < /svg>，如帖子中所示。

编辑：w3schools 上的 svg

我添加了指向 w3schools 的链接，以便您可以查看 svg 对象的更多属性

玩得开心

Answer 3

如果您可以发布您的代码，也许我们可以为您解决问题。

试试这个：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/