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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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