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

【问题标题】：How to change both fill and stroke in svg with css如何使用css更改svg中的填充和描边
【发布时间】：2014-04-29 08:40:19
【问题描述】：

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

我可以用 css 更改填充属性，但是，有些图标是透明的，因此大部分笔划都需要更改。任何想法如何解决这个问题？以下不起作用（它只针对填充）

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

}

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

【问题讨论】：

小提琴或 codepen 中的更多代码可能会帮助您获得答案、建议或准确的 cmets :)
我更新了你的fiddle。你有一个错字（polygone 而不是 polgyon）

标签： css svg

【解决方案1】：

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

【讨论】：

☝️ 这应该是选择的答案。
有没有办法使用这种技术为填充和描边指定两种不同的颜色？
@Shano - 是的，css 变量

【解决方案2】：

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

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

【讨论】：

好的 - 这让我对大多数图标有很长的路要走，但仍有一些笔画不是目标？例如这个link
将 svg:hover polygone 更改为 svg:hover polygon :-)