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

Question

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

我可以用 css 改变 fill 属性，但是，一些图标是透明的，因此大部分笔触需要改变。任何想法如何解决这个问题？以下不起作用(它仅针对填充)

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

更新:正如 Anders G 所建议的那样，我没有正确定位 svg 元素，我解决了大部分问题，但仍有几行拒绝更改颜色 :) 看看 fiddle

Answer 1

如果您希望对填充和描边使用相同的颜色，“currentColor”值和“color”属性很有用。
我做 sample 。 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>

使用颜色属性的 css 代码。

svg:hover {
    color:#dd6127;  
}