如何在悬停事件中更改 SVG 图像中的笔触颜色？ [复制]

Posted 2023-05-08

【中文标题】如何在悬停事件中更改 SVG 图像中的笔触颜色？ [复制]

【英文标题】：How to Change Stroke Color in SVG Image on Hover Event? [duplicate]

【发布时间】：2014-04-12 21:49:59

【问题描述】：

我一直在网站上寻找答案，但似乎没有人真正得到这个特定问题的明确答案。

我希望更改悬停在 SVG 图标上时的笔触颜色。

这是我当前的代码：

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

CSS：

.icon width:100%

【问题讨论】：

你看***.com/questions/4906148/…了吗？

如果您可以在 html 文件中嵌入 SVG，这很容易。然后您可以引用#Layer_1 ID 并更改子元素的样式。

谢谢，伙计们！我设法弄明白了！ codepen.io/anon/pen/fDuKi@helderdarocha，如果您将您的回复设置为答案，我会将其标记为正确！再次感谢！

我可以这样做，但请编辑您的问题，包括您所询问的问题的代码（codepen 链接不够），以便其他可能有类似问题的人参考（并避免将其删除）。

【参考方案1】：

您不能以这种方式更改外来对象的属性。但是如果您可以在 HTML 文件中嵌入 SVG，那就很容易了。然后您可以引用 SVG 的 ID 并更改子元素的样式。

替换

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

包含 SVG 文件的内容：

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

现在您可以对其应用样式：

#styled-element:hover  stroke:red