Почему я не могу покрасить этот SVG с помощью свойства color CSS

Question

Я ищу способ изменить цвет значка SVG (без fill, поскольку он не поддерживается в IE11), и я увидел, что Github делает это, используя свойство color.

Iполучил этот SVG от Github (в основном кнопка со звездочкой).Если я захожу на 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-трюкам на эту тему.

Редактировать: Конечно, здесь также используется 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>