[英]Why can't I color this SVG with the color CSS property
I am looking for a way to change the color of an SVG icon (without fill
since it's not supported on IE11) and I saw that Github does it using the color
property. 我正在寻找一种更改SVG图标颜色的方法(无
fill
因为IE11不支持该color
),我发现Github使用color
属性来完成此操作。
I got this SVG from Github (basically the star button). 我从Github获得了这个SVG(基本上是星形按钮)。 If I go on Github and inspect it using developer tools and then set a color (
color: red
) on it, I can get it to change color. 如果我继续使用Github并使用开发人员工具对其进行检查,然后在其上设置颜色(
color: red
),则可以更改颜色。
However if I copy it on my page and try to do the same it does not work: 但是,如果我将其复制到我的页面上并尝试执行相同操作,将无法正常工作:
.octicon-star { color:red; }
<svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
Any ideas? 有任何想法吗?
You are looking for fill: CurrentColor
. 您正在寻找
fill: CurrentColor
。 It changes the fill
of the svg according to the value of color
. 它根据
color
的值更改svg的fill
。 Here's an article on CSS-Tricks on this. 这是关于CSS技巧的文章。
Edit: Of course this uses fill
aswell, but it's the method github is using. 编辑:当然,这也使用
fill
,但这是github使用的方法。
.octicon-star { color: green; } svg { fill: currentColor; }
<svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.