如何在鼠标悬停事件中更改SVG图像的描边颜色？

Question

我在网站上搜索了答案，似乎没有人真正得到这个特定问题的明确答案。

当鼠标悬停在SVG图标上时，我想改变描边的颜色。

这是我的当前代码：

<object data="price.svg" type="image/svg+xml" class="icon">
    <a href="price.svg" />
</object>

CSS：

.icon {width:100%}

- user3389584

---

你看过 https://dev59.com/8G445IYBdhLWcg3wWY8U 吗？ - Jason Aller

如果您可以在HTML文件中嵌入SVG，那么这将变得很容易。然后，您可以引用#Layer_1 ID并更改子元素的样式。 - helderdarocha

谢谢，伙计们！我设法搞定了！http://codepen.io/anon/pen/fDuKi @helderdarocha，如果你把你的回答设为答案，我会标记为正确的！再次感谢！ - user3389584

我可以帮你解决问题，但请编辑你的问题并包含相关代码（仅提供CodePen链接不够），这样其他可能遇到类似问题的人可以参考（同时也避免其被删除）。 - helderdarocha

Answer 1

如果你想更改一个外部对象的属性，这种方式是不可行的。但是，如果你能够将SVG嵌入HTML文件中，那么就很容易了。这样，你就可以引用SVG的ID并更改子元素的样式。

替换

<object data="price.svg" ...> ... </object>

使用您的SVG文件中的内容：

<svg ...><path id="styled-element" ...></svg>

现在你可以对它应用样式：

#styled-element:hover { stroke:red }

- helderdarocha