Можно ли поменять fill у SVG заданого файлом в фоновом изображении?

Question

На серверной стороне есть данные:

$arr[0]['title'] = 'John Smith';
$arr[0]['photo'] = 'img/John Smith.svg';

Из этих данных вычисляется цвет иконки персонажа:

$color = '#'.mb_substr(md5($arr[0]['title']),0,3);

Из этих данных формируется код:

<style>
.pic {
  background-image: url(".$arr[0]['photo'].");
  fill: ".$color.";
}
</style>

<h2>".$arr[0]['title']."</h2>
<div class="pic">
</div>

Не было бы проблемы, если бы SVG картинка была добавлена в HTML инлайн или Base64.
Но как окрасить ее, когда она задана в файле?

UPD: Казалось бы элегантное решение прописать в css .pic {--svg-color: ".$color."} и style="fill: var(--svg-color)" внутри svg файла, но не работает, когда картинка - это фон. (

UPD2: По многочисленным просьбам добавил картинку:

Answer 1

А что вам мешает использовать инлайновые стили, и красить вашей $color уже получаемый html фаил ? Что то по типу <div class="pic"><svg ... fill=".$color."></svg></div>

Answer 2

Если SVG иконка добавлена отдельным файлом с помощью тега <img>, то это тоже самое, как добавить растровое изображение, к которому невозможно применить изменение цвета с помощью CSS правил. Возможно только поменять цвет background.

Но есть способ сделать изменение цвета иконки с помощью фильтров CSS или SVG

Допустим добавлена иконка ключа с помощью <img>:

img 
{
width:100px;
height:100px;
}

<img src="https://twemoji.maxcdn.com/svg/1f511.svg">

С помощью различных css фильтров меняем цвет иконок:

.container {
display:inline-block;
width:25%;
height:25%;
padding:1.5em;
background: rgb(123,215,193);
background: linear-gradient(90deg, rgba(123,215,193,1) 4%, rgba(225,233,148,1) 97%);
}
.key {
  height: 3em;
  width: 3em;
 
   }
.grey-out {
  opacity: 0.4;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}
.invert {
  
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

<div class="container">
<img class="key" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
  <img class="key grey-out" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
   <img class="key hue-rotate" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
    <img class="key invert" src="https://twemoji.maxcdn.com/svg/1f511.svg">
</div>

Пример, если svg файл добавлен с помощью background-image:

.key {
  background-image: url("https://twemoji.maxcdn.com/svg/1f506.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 3em;
  width: 3em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.3em;
  background-size: 3em 3em; 
 }
.grey-out {
  opacity: 0.4;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}
.invert {
   -webkit-filter: invert(100%);
    filter: invert(100%);
}

<div>
  <span class="key"></span>
  <span class="key grey-out"></span>
  <span class="key hue-rotate"></span>
  <span class="key invert"></span>
</div>

Вариант с изменением цвета при наведении

.container {
display: -webkit-flex; 
display: flex; 
width:35%;
height:35%;
}
.key {
  height: 3em;
  width: 3em;
   padding: 1em;
   transition:  0.8s;
   }
:hover.key{
  height: 4em;
  width: 4em;
    -webkit-filter: hue-rotate(320deg);
     filter: hue-rotate(320deg);
   }
.grey-out {
  opacity: 0.4;
   -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);

  
}
.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

<div class="container">
<img class="key" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
  <img class="key grey-out" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
   <img class="key hue-rotate" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
    <img class="key invert" src="https://twemoji.maxcdn.com/svg/1f511.svg">
</div>

БЛОГ НА HUSL

Можно ли поменять fill у SVG заданого файлом в фоновом изображении?

Ответы (2 шт):