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

我在设计中内嵌了一系列黑色/透明SVG图标。我需要将所有黑色填充和笔触更改为悬停时的自定义颜色。如何使用css更改svg中的填充和描边

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

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

}

UPDATE：正如安德斯摹建议，我是不是正确针对SVG元素，我解决了我的大部分问题，但仍然有几行拒绝改变颜色:)看看fiddle

来源

2014-04-28 user2135738

更多代码的小提琴或codepen可以帮助你得到答案，建议或意见准确:) –

我更新了[提琴]（http://jsfiddle.net/vG4U6/6/）。你有一个错字（_polygone_而不是_polgyon_） – bitbitdecker

在没有任何代码的情况下在盲人中摆弄一下，但是我的5美分说你需要瞄准SVG元素（在SVG中）。例如：

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

来源

2014-04-28 22:06:25 agrm

好的 - 这让我用很多图标很长的路，但仍有一些笔画不是针对性的？例如这个[链接]（http://jsfiddle.net/vG4U6/） – user2135738

更改'svg：悬停polygone'到'svg：hover polygon' :-) – agrm

如果您希望使用相同的颜色填充和中风，“currentColor”的价值和“颜色”属性是有用的。
我mase样品。使用currentColor值 http://jsfiddle.net/defghi1977/KtCht/1/

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; 
}

来源

2014-04-29 00:40:19 defghi1977

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

回答

相关问题