如何用css更改svg中的填充和描边

Question

我的设计中有一系列黑色/透明的SVG图标.我需要在悬停时将所有黑色填充和笔划更改为自定义颜色.

我可以用css更改fill属性,但是,有些图标是透明的,因此大多数笔画需要更改.任何想法如何解决这个问题？以下不起作用(它只针对填充)

.icons svg:hover {
fill:#dd6127;  
stroke:#dd6127;

}

更新:根据Anders G的建议,我没有正确定位svg元素,我解决了大部分问题,但仍有一些线条拒绝改变颜色:)看看小提琴

Answer 1

如果您希望对填充和描边使用相同的颜色,"currentColor"值和"颜色"属性是有用的.
我是样品. http://jsfiddle.net/defghi1977/KtCht/1/

使用currentColor值的svg代码.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle fill="none" stroke="currentColor" stroke-width="30" stroke-miterlimit="10" cx="232.083" cy="200.002" r="182.624"/>
    <g>
        <polygon fill="none" stroke="currentColor" points="..."/>
        <polygon fill="currentColor" stroke="currentColor" points="..."/>
    </g>
</svg>

使用color属性的css代码.

svg:hover {
    color:#dd6127;  
}

Answer 2

在没有任何代码的情况下盲目地摆弄一下，但我的 5 美分说你需要定位 SVG 元素（在 SVG 内部）。例如 ：

.icons svg:hover rect {
    fill:#dd6127;  
    stroke:#dd6127;
}