Использование CSS переменных для стилизации клонов, созданных командой <use>

#html #css #css3 #svg

При вызове svg элементов командой  из секции  или из  

   

элемент попадает в shadow DOM.    

Для закраски svg элементов используется команда fill="red", но его свойства в этом
случае не наследуются. Так как мы имеем дело не с самим svg элементом, а ссылкой на
него в shadow DOM.       








Эта проблема решается принудительным наследованием с помощью правила CSS - fill:inherit;
Но этот путь решения только для одноцветных иконок.
А как поменять цвета у многоцветных изображений, как в примере выше?
    

Ответы

Ответ 1

Решение с помощью  CSS переменных

CSS переменные наследуют свойство fill.  Поэтому можно внутри тега  назначить
(объявить) переменную, значение которой, можно в последствии многократно менять для
каждого экземпляра svg элемента.   

 


  


Каждому path, circle, ellips, и т.д  можно присвоить для fill свою переменную fill="var(--color-face)"
и в дальнейшем менять её значение во внешней таблице стилей:   

.predator-colors {
  --color-face: #7986CB;
  --color-nose: #9FA8DA;
}  

Этот прием создаёт мощные и гибкие возможности для стилизации многоцветных иконок.    

Например для одного состояния иконки мы можем назначить одну цветовую схему, а при
:hover назначить к той же иконке другой цветовой набор.   

.predator-colors {
  --color-face: #7986CB;
  --color-nose: #9FA8DA;
} 
.predator-colors:hover {
  --color-face: #3F8B4D;  
  --color-nose: #58C46C;
)    


Ниже пример, по своему вкусу легко создается и меняется цветовая схема изображения:   



.predator-colors {
  --color-face: #7986CB;
  --color-nose: #9FA8DA;
  --color-hair-right:#3949AB;
  --color-hair-right2:#3949AB;
  --color-hair-left:#3949AB;
  --color-hair-left2:#3949AB;
  --color-eye-right:#1A237E;
  --color-pupil-right:#77006B;
  --color-eye-left:#1A237E;
  --color-pupil-left:#77006B;
  --color-ellipse1:#9FA8DA;
  --color-ellipse2:#7986CB;
  --color-ellipse3:#C5CAE9;
}  

.predator-colors:hover {
  --color-face: #3F8B4D;  
  --color-nose: #58C46C;
  --color-hair-right:gold;
  --color-hair-right2:#FFBB00;
  --color-hair-left:gold;
  --color-hair-left2:#FFBB00;
  --color-eye-right:#77006B;
  --color-pupil-right:#FF4151;
  --color-eye-left:#77006B;
  --color-pupil-left:#FF4151;
  --color-ellipse1:#FFDD00;
  --color-ellipse2:#C1A700;
  --color-ellipse3:#FFEE7D;
} 





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

Для каждого экземпляра созданного  своя цветовая схема,
которая привязывается к классу вложенного svg.       


 
 

 
 


 
          


При :hover у каждого экземпляра цветовая схема заменяется на цветовую схему соседнего
экземпляра.



.parent {
position:relative;
}
.container {
width:400px;
height:400px;
outline:1px solid green;

position:absolute;
top:0;
} 
.container2 {
position: absolute;
top:0;
left:150px;

} 

.container3 {
position: absolute;
top:0;
left:240px;

} 

.color-Martian {
  --color-ears: #459E48;
  --color-horn-right: #388E3C;
  --color-horn-left: #388E3C;
  --color-face:#4CAF50;
  --circle-horn-left:#8BC34A;
  --circle-horn-right:#8BC34A;
  --eye-right:#FFF9C4;
  --eye-left:#FFF9C4;
  --pupil-right:#263238;
  --pupil-left:#263238;
  --mouth:#173027;
  }  
  
  .color-Martian:hover {
  --color-ears: #504F7A;
  --color-horn-right: #504FF6;
  --color-horn-left: #504FF6;
  --color-face:#807FC4;
  --circle-horn-left:#FF00AE;
  --circle-horn-right:#FF00AE;
  --eye-right:#FFDBF4;
  --eye-left:#FFDBF4;
  --pupil-right:#263238;
  --pupil-left:#263238;
  --mouth:#FFDBF4;
  }  
  
  .color-Martian2 {
  --color-ears: #504F7A;
  --color-horn-right: #504FF6;
  --color-horn-left: #504FF6;
  --color-face:#807FC4;
  --circle-horn-left:#FF00AE;
  --circle-horn-right:#FF00AE;
  --eye-right:#FFDBF4;
  --eye-left:#FFDBF4;
  --pupil-right:#263238;
  --pupil-left:#263238;
  --mouth:#FFDBF4;
  }   
  
  .color-Martian2:hover {
  --color-ears: #770051;
  --color-horn-right: #388E3C;
  --color-horn-left: #388E3C;
  --color-face:#FFDD00;
  --circle-horn-left:#D0FF00;
  --circle-horn-right:#A0C400;
  --eye-right:#FFF9C4;
  --eye-left:#FFF9C4;
  --pupil-right:#263238;
  --pupil-left:#263238;
  --mouth:#FFF9C4;
  
  }  
  
  .color-Martian3 {
  --color-ears: #770051;
  --color-horn-right: #388E3C;
  --color-horn-left: #388E3C;
  --color-face:#FFDD00;
  --circle-horn-left:#D0FF00;
  --circle-horn-right:#A0C400;
  --eye-right:#FFF9C4;
  --eye-left:#FFF9C4;
  --pupil-right:#263238;
  --pupil-left:#263238;
  --mouth:#FFF9C4;
  } 
  
  .color-Martian3:hover {
  --color-ears: #459E48;
  --color-horn-right: #388E3C;
  --color-horn-left: #388E3C;
  --color-face:#4CAF50;
  --circle-horn-left:#8BC34A;
  --circle-horn-right:#8BC34A;
  --eye-right:#FFF9C4;
  --eye-left:#FFF9C4;
  --pupil-right:#263238;
  --pupil-left:#263238;
  --mouth:#173027;
  }





 
 

 
 


 







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