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

<分区>

我一直在网站上搜索答案，但似乎没有人真正收到针对这个特定问题的明确答案。

我想更改悬停在我制作的 SVG 图标上的描边颜色。

这是我当前的代码:

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

CSS:

.icon {width:100%}

最佳答案

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

替换

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

使用 SVG 文件的内容:

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

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

#styled-element:hover { stroke:red }

关于javascript - 如何在悬停事件中更改 SVG 图像中的描边颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22289214/