如何在悬停时更改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 对象的更多属性

玩得开心