如何在悬停事件上改变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 }