如何在悬停事件中更改SVG图像中的笔画颜色？

Question

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

我正在寻找在我悬停的SVG图标上更改笔画的颜色。

这是我目前的代码：

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

CSS：

.icon {width:100%}

Answer 1

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

替换

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

包含SVG文件的内容：

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

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

#styled-element:hover { stroke:red }