Как стилиховать один svg если у него два path и у обоих fill

Question

Товарищи, можете подсказать, мне нужно стилизовать svg (hover,focus,active), но проблема в том, что он состоит из двух path и у обоих fill. А в стилизации мне для каждого куска нужно устанавливать разные цвета. Как это можно реализовать?

<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_24531_3992)">
<path d="M10.5 20C16.0228 20 20.5 15.5228 20.5 9.99998C20.5 4.47714 16.0228 0 10.5 0C4.97724 0 0.5 4.47714 0.5 9.99998C0.5 15.5228 4.97724 20 10.5 20Z" fill="#F0D288"/>
<path d="M17.4385 4.54415L13.7295 3.177L8.3957 10.8639L8.92677 7.37535L6.02058 5.68243L0.67395 12.1143C0.924269 13.3861 1.4102 14.5721 2.08387 15.6241L5.27373 11.7714L4.09993 16.2964L7.73707 17.6273L13.1408 9.84664L11.9569 14.296L14.9033 16.0181L20.558 10.3177C20.5592 10.2537 20.5599 10.1891 20.5599 10.1249C20.5599 8.78283 20.3017 7.50156 19.8329 6.32921L16.5482 9.65404L17.4385 4.54415Z" fill="#121723"/>
</g>
<defs>
<clipPath id="clip0_24531_3992">
<rect x="0.5" width="20" height="20" rx="10" fill="white"/>
</clipPath>
</defs>
</svg>

Answer 1

Задайте каждому path свой класс, тогда:

.mysvg:hover .path1 {
  fill: red;
}

.mysvg:hover .path2 {
  fill: blue;
}

<svg class="mysvg" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0_24531_3992)">
    <path class="path1" d="M10.5 20C16.0228 20 20.5 15.5228 20.5 9.99998C20.5 4.47714 16.0228 0 10.5 0C4.97724 0 0.5 4.47714 0.5 9.99998C0.5 15.5228 4.97724 20 10.5 20Z" fill="#F0D288"/>
    <path class="path2" d="M17.4385 4.54415L13.7295 3.177L8.3957 10.8639L8.92677 7.37535L6.02058 5.68243L0.67395 12.1143C0.924269 13.3861 1.4102 14.5721 2.08387 15.6241L5.27373 11.7714L4.09993 16.2964L7.73707 17.6273L13.1408 9.84664L11.9569 14.296L14.9033 16.0181L20.558 10.3177C20.5592 10.2537 20.5599 10.1891 20.5599 10.1249C20.5599 8.78283 20.3017 7.50156 19.8329 6.32921L16.5482 9.65404L17.4385 4.54415Z" fill="#121723"/>
  </g>
  <defs>
    <clipPath id="clip0_24531_3992">
      <rect x="0.5" width="20" height="20" rx="10" fill="white"/>
    </clipPath>
  </defs>
</svg>

БЛОГ НА HUSL

Как стилиховать один svg если у него два path и у обоих fill

Ответы (1 шт):