Почему это простое изменение цвета значка Font Awesome SVG не работает? - PullRequest
Новая
       11

Почему это простое изменение цвета значка Font Awesome SVG не работает?

0 голосов
/ 14 февраля 2020

Я пытаюсь изменить цвет значка Font Awesome. Я не использую шрифт или <i> разметку . Я использую загруженный файл .svg .

SVG внутри файла довольно прост: 

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cat" class="svg-inline--fa fa-cat fa-w-16"
  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="currentColor" d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32
    32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84
    7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81
    0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98
    96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16
    16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z"></path></svg>

Я ожидал, что параметр fill="currentColor" внутри файла .svg можно было бы изменить цвет изображения с помощью простого стиля CSS, но это не так. Изображения SVG как файлы всегда ведут себя так, как если бы currentColor был черным? Есть ли способ обойти это? 

<div>
  <img src="https://shetline.com/img/cat-solid.svg" width=50 height=50> ← SVG image defaults to black<br>
  <div style="color: red"><img src="https://shetline.com/img/cat-solid.svg" width=50 height=50> ← This SVG image should be red</div>
  <img style="color: blue" src="https://shetline.com/img/cat-solid.svg" width=50 height=50> ← This SVG image should be blue<br>
</div>
<div style="display: inline-block; color: green; width: 50px; height: 50px;">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cat" class="svg-inline--fa fa-cat fa-w-16"
  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="currentColor" d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32
32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84
7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81
0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98
96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16
16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z"></path></svg></div>
← Applying color works when using inline SVG instead of SVG image file

1 Ответ

1 голос
/ 16 февраля 2020

SVG-файлы, к которым обращаются как к отдельным внешним изображениям (например, <img> или background-image), должны быть автономными. Стилизация вне файла не влияет на SVG.

Вы можете думать об этом, как будто это просто файл PNG.

...