SVG Замена стилей для клонов объекта находящегося в symbol?

#html #css #css3 #svg

Есть такая задача => Дана некая svg картинка, предположим кот, которая прорисована
в разных цветовых оттенках (имеет разные размеры масштабирования, положения на холсте
и т.д..)
Возможно ли как-то через css переназначить цвет для других частей повторяющегося
элемента?
 Приведу пример



body {
  margin: 0;
  padding: 0;
  background-color: #000;
}

#preloader_cats {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vh;
  height: 60vh;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  border: 1px solid #f00;
}

.cat_body {
  fill: #ea8023
}

.cat_body:nth-of-type(2) {
  fill: #ff0
}





Можно ли как-то переназначить "цвет тела" второму, третьему и тд коту, а так же цвет
глаз если помещать это всё в ОДИН тег символ (ну или другой элемент)? Вопрос больше
про минимизацию кода, поскольку я понимаю что можно каждую часть повторяемых элементов
завернуть в символы и уже их менять 
    

Ответы

Ответ 1

При использовании команды  элемент svg попадает в "теневой дом". Поэтому обычные
приемы стилизации не работают. Так как при каждом вызове иконки это одна и та же копия
одного элемента и свойства fill не наследуется. 

Решением данной проблемы является использование переменных CSS. 

Мы будем использовать атрибут fill для каждой части  в определении нашей
SVG-иконки кота и зададим им разные CSS-переменные. Затем мы назначим им разные цвета.  

.cat-colors {
  --color-0: #ea8023;
  --color-1: black;
  --color-2: green;
  --color-3: yellowgreen;
  --color-4: dodgerblue;
} 

Для второй копии кота назначаем второй цветовой набор частей тела: 

.cat-colors2 {
  --color-0: #4D4B4B;
  --color-1: dodgerblue;
  --color-2: gold;
  --color-3: #ea8023;
  --color-4: greenyellow;
}


При таком использовании css переменных, допускается сколько угодно цветовых схем
клонов кота. Масштабирование, перемещение не будет влиять на окраску, так как она применяется
после вызова клона и всех трансформаций. 

Ниже, немного измененный код автора вопроса с добавлением CSS переменных.  



body {
  margin: 0;
  padding: 0;
  background-color: black;
}

#preloader_cats {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vh;
  height: 60vh;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  border: 1px solid #f00;
}



.cat-colors {
  --color-0: #ea8023;
  --color-1: black;
  --color-2: green;
  --color-3: yellowgreen;
  --color-4: dodgerblue;
} 

.cat-colors2 {
  --color-0: #4D4B4B;
  --color-1: dodgerblue;
  --color-2: gold;
  --color-3: #ea8023;
  --color-4: greenyellow;
}