为什么我不能使用 color CSS 属性为这个 SVG 着色

Question

我正在寻找一种方法来更改 SVG 图标的颜色（没有，fill因为 IE11 不支持它），我看到 Github 使用该color属性来完成它。

我从 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>

有任何想法吗？

Answer 1

您正在寻找fill: CurrentColor. 它fill根据 的值更改svg 的color。这是一篇关于 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>