Question

我正在寻找一种更改SVG图标颜色的方法（由于IE11不支持fill，因此我发现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。 Here's上有关CSS技巧的文章。

编辑：当然，它也使用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属性color

1 个答案: