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

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

Ответ

При использовании команды элемент 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; }