Изменение цвета заливки SVG в: до или: после CSS

У меня есть SVG-графический рисунок, подобный этому:

a::before { content: url(filename.svg); }

Когда я наводил курсор на тег, я действительно хочу, чтобы SVG менял цвет заливки, не загружая новый SVG файл, как я сейчас:

a:hover::before { content: url(filename_white.svg); }

Можно ли достичь использования JavaScript, jQuery или просто чистого CSS, о котором я не знаю?

Спасибо.

Ответ 1

Использование свойства content генерирует (не подвергается риску) разметку, функционально эквивалентную элементу svg в элементе <img> .

Вы не можете применять стиль к элементам внутри документа svg, потому что:

стили не разрешены для каскадирования документов.
при использовании <img> (или content или любого свойства изображения css, которое ссылается на svg), документ svg не отображается браузерами из-за проблем с безопасностью

Аналогичные вопросы, но для background-image здесь и здесь.

Итак, чтобы делать то, что вы хотите, вы должны как-то обойти эти два пункта. Для этого существуют различные варианты, например, использование inline svg, использование фильтров (применяется к <img> ) или создание различных svg файлов (или URI данных), как в вашем вопросе.

Ответ 2

Принятый ответ неверен, это фактически возможно, применяя обходной путь с маской SVG и цветом фона:

p:after {
  width: 48px;
  height: 48px;
  display: inline-block;
  content: '';
  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.red:after {
  background-color: red;
}

.green:after {
  background-color: green;
}

.blue:after {
  background-color: blue;
}

<p class="red">red heart</p>
<p class="green">green heart</p>
<p class="blue">blue heart</p>