Question

所以我有以下SVG图像：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<title>ic_toggle_on_1</title>
<style>
    .circle {
        fill:#3165bd;
    }
</style>
<path class="circle" d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM6.78,11.73,3.17,8.12,4.58,6.7l2.2,2.2,4.64-4.63,1.41,1.41Z"/>
</svg>

我正在尝试使用以下CSS更改悬停时的颜色：

.toggleCircle[data-state="open"]:hover img {
    /*fill:#047ad4;*/
    fill:red!important;
}

如果我使用说border，哪个工作正常，但由于某种原因，fill属性无法修改SVG。我已经读过，只要填充不是内联的，这应该可以被CSS覆盖，虽然有change color of svg images with css这已经6年了，我相信已经过时了。

我是否遗漏了为什么这个SVG不会改变颜色的明显错误？

Answer 1

您可能需要更具体的选择器。更具体的选择器会覆盖不太具体的选择器。也许尝试像

这样的东西

.circle.my-circle:hover { fill: red }

和

<path class="circle my-circle" ...>

SVG不会用CSS改变颜色

1 个答案: