Question

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

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

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

}

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

Answer 1

如果你想使用相同的颜色填充和描边，＆＃34; currentColor＆＃34;价值和＆＃34;颜色＆＃34;财产很有用我是样品。 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;
}

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

2 个答案: