1

Использую на сайте svg sprite и подключаю с помощью <use xlink:href="url"></div>. Столкнулся с проблемой, что нужно при ховере красить svg, и если иконка имеет сплошной цвет, то красить с помощью свойства fill на svg - работает все как нужно, но нужно покрасить разные элементы svg иконки (path) в разные цвета, и не нашел решения как сделать. Например, есть svg иконка круга, цвет фона должен быть желтый, а внутри еще один круг зеленый. Можно ли вообще красить спрайты по отдельным элементам? Или только использовать кодом напрямую в самом html или как-то получить доступ с помощью js

3
  • Попробуйте патчам классы добавить и обращаться к ним в css по классам 11 мая 2022 в 6:36
  • У меня через use найти решения пока не получилось. Только если на прямую в html код svg писать...
    – Knyaz71
    11 мая 2022 в 9:19
  • Покажите код, гадать как у вас там всё устроено никто не будет.
    – De.Minov
    11 мая 2022 в 10:19

1 ответ 1

1

Например, есть svg иконка круга, цвет фона должен быть желтый, а внутри еще один круг зеленый. Можно ли вообще красить спрайты по отдельным элементам?

Можно окрашивать в разные цвета отдельные path внутри иконки, которая находится внутри спрайта. Для этой цели лучше всего использовать переменные CSS, которые, как computed style имеют наивысший приоритет.

В примере ниже я использовал иконку с тремя разноцветными кругами, которые меняют свои цвета при наведении:

#u1 {
--color1:purple;
--color2:yellowgreen;
--color3:gold;
}
#u1:hover {
--color1:red;
--color2:gold;
--color3:yellowgreen;
}
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="0" height="0" viewBox="0 0 200 200" >  
         
<symbol id="circ">
<circle cx="100" cy="100" r="50" fill="var(--color1)" />
 <circle cx="100" cy="100" r="35" fill="var(--color2)" />
  <circle cx="100" cy="100" r="20" fill="var(--color3)" />
</symbol>  
</svg>  
<svg>
 <use id="u1" xlink:href="#circ" />
</svg>   

В примере ниже иконка вызывается с помощью <use> два раза, но при :hover у них разные цветовые схемы:

#u1,#u2 {
--color1:purple;
--color2:yellowgreen;
--color3:gold;
}
#u1:hover {
--color1:red;
--color2:gold;
--color3:yellowgreen;
}
#u2:hover {
--color1:silver;
--color2:cyan;
--color3:dodgerblue;
}
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="0" height="0" viewBox="0 0 100 100" >  
         
<symbol id="circ">
<circle cx="50" cy="50" r="50" fill="var(--color1)" />
 <circle cx="50" cy="50" r="35" fill="var(--color2)" />
  <circle cx="50" cy="50" r="20" fill="var(--color3)" />
</symbol>  
</svg>  
<svg  width="100"  height="100" >
 <use id="u1" xlink:href="#circ" />
</svg>   
  <svg width="100"  height="100" >
 <use id="u2" xlink:href="#circ" />
</svg>   

Ещё один пример с более насыщенной цветовой схемой при ховере:

введите сюда описание изображения

.monstr-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;
}  

.monstr-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  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="192" height="192" viewBox="0 0 48 48" > 
<symbol id="monstr"> 
<rect width="100%" height="100%" fill="transparent" />
<path id="face" fill="var(--color-face)" d="M15.4,34.1L24,37l8.6-2.9c1.9-0.6,3-2.6,2.6-4.6L33,20H15l-2.2,9.5C12.3,31.5,13.5,33.5,15.4,34.1z"/>
<path  id="nose" fill="var(--color-nose)" d="M29,30l-3-3h-4l-3,3v7c0,1.1,0.9,2,2,2h6c1.1,0,2-0.9,2-2V30z"/>


    <path id="hair-right" fill="var(--color-hair-right)" d="M31,7c-0.5,0-1,0.4-1,1c0,0,0,0,0,0c-0.4,0-0.8,0.2-0.9,0.6c-0.2,0.5,0,1.1,0.6,1.3   C30,10.1,40,14.4,40,32.4V37c0,0.6,0.4,1,1,1s1-0.4,1-1v-4.6c0-14.4-6.1-20.7-9.5-23.1C35.9,10.3,44,14.7,44,34c0,0.6,0.4,1,1,1   s1-0.4,1-1C46,7.7,31.6,7,31,7z"/>
    <path id="hair-right2" fill="var(--color-hair-right2)" d="M29.5,10.1c-0.5-0.3-1.1-0.1-1.3,0.4c-0.3,0.5-0.1,1.1,0.4,1.4c0.1,0,7.5,4.3,7.5,20.1v8c0,0.6,0.4,1,1,1   s1-0.4,1-1v-8C38,14.9,29.8,10.3,29.5,10.1z"/>
    <path id="hair-left" fill="var(--color-hair-left)" d="M18.4,9.9c0.5-0.2,0.8-0.8,0.6-1.3C18.8,8.2,18.4,8,18,8c0,0,0,0,0,0c0-0.6-0.5-1-1-1C16.4,7,2,7.7,2,34   c0,0.6,0.4,1,1,1s1-0.4,1-1c0-19.6,8.1-23.8,11.6-24.7C12.2,11.6,6,17.9,6,32.4V37c0,0.6,0.4,1,1,1s1-0.4,1-1v-4.6   C8,14.4,18,10.1,18.4,9.9z"/>
    <path id="hair-left" fill="var(--color-hair-left2)" d="M18.5,10.1C18.2,10.3,10,14.9,10,32v8c0,0.6,0.4,1,1,1s1-0.4,1-1v-8c0-15.8,7.4-20.1,7.5-20.1   c0.5-0.3,0.7-0.9,0.4-1.4C19.6,10,19,9.9,18.5,10.1z"/>

<path id="eye-right" fill="var(--color-eye-right)" d="M25,24.9c0,0,0.2,1.3,0.6,1.7s3.3,2.5,5.9-0.9c1.2-1.5,0.6-3.8,0.6-3.8S29.4,24.1,25,24.9z"/>
<circle id="pupil-right" cx="28" cy="25" r="1.5" fill="var(--color-pupil-right)" />
<path id="eye-left" fill="var(--color-eye-left)" d="M15.8,21.8c0,0-0.6,2.3,0.6,3.8c2.6,3.4,5.5,1.4,5.9,0.9c0.4-0.4,0.6-1.7,0.6-1.7  C18.6,24.1,15.8,21.8,15.8,21.8z"/> 
<circle id="pupil-left" fill="var(--color-pupil-left)" cx="20" cy="25" r="1.5" fill="red" />
<ellipse  id="ellipse1" fill="var(--color-ellipse1)" cx="24" cy="15" rx="12" ry="10"/>
<ellipse id="ellipse2" fill="var(--color-ellipse2)" cx="24" cy="13.8" rx="10" ry="7.8"/>
<ellipse id="ellipse3" fill="var(--color-ellipse3)" cx="24.2" cy="12.2" rx="8" ry="6.2"/> 

</symbol> 
 <svg class="monstr-colors">
  <use  xlink:href="#monstr" />
 </svg>
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.