我正在寻找一种更改 SVG 图标颜色的方法(没有 fill
,因为它在 IE11 上不受支持),我看到 Github 使用 color
属性(property)。
我从 Github 获得了这个 SVG(基本上是星形按钮)。如果我继续 Github 并使用开发人员工具检查它,然后在其上设置颜色 (color: red
),我可以让它改变颜色。
但是,如果我将它复制到我的页面上并尝试执行相同的操作,它就不起作用:
.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>
有什么想法吗?
最佳答案
您正在寻找 fill: CurrentColor
。它根据 color
的值更改 svg 的 fill
。 Here's一篇关于 CSS-Tricks 的文章。
编辑:当然这也使用 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>
关于css - 为什么我不能使用颜色 CSS 属性为这个 SVG 着色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54790424/