Изменение цвета иконки SVG при наведении - PullRequest
Новая
       23

Изменение цвета иконки SVG при наведении

0 голосов
/ 08 февраля 2020

Я пытался изменить цвет значков SVG при наведении курсора. Мои значки SVG состоят из различных форм, таких как круг, прямоугольник, многоугольник, траектория и т. Д. c.

Вот мой HTML для SVG: 

<svg version="1.1" id="Layer_1" class="icon flag-icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
  <rect x="0.1" y="0" display="none" fill="#FFFFFF" width="63.9" height="54"></rect>
  <g>
    <g>
      <polygon fill="#010101" points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8       "></polygon>
    </g>
  </g>
  <g>
    <g>
      <path fill="#010101" d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5                          c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z"></path>
    </g>
  </g>
</svg>

Это первый SVG , Пожалуйста, предложите какой-нибудь способ изменить его цвет на #ff721f при наведении.

1 Ответ

3 голосов
/ 08 февраля 2020

Лучше было бы немного изменить структуру SVG. Оберните фигуры SVG в элемент g с атрибутом fill="currentColor" и удалите атрибут fill из отдельных элементов. Таким образом, вы можете определить / изменить цвет SVG, используя CSS color свойство: 

.flag-icon1 { color: #010101; }

.flag-icon1:hover { color: #ff721f; }
<svg version="1.1" id="Layer_1" class="icon flag-icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
  <g fill="currentColor">
    <polygon points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8" />
    <path d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5 c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z" />
  </g>
</svg>

Кроме того, вы можете использовать свойство fill для переопределения цветов для состояния наведения: 

.flag-icon1:hover * {
  fill: #ff721f;
}
<svg version="1.1" id="Layer_1" class="icon flag-icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="54px" viewBox="0 0 64 54" enable-background="new 0 0 64 54" xml:space="preserve">
  <g>
    <polygon fill="#010101" points="37,21.6 30.2,28.5 26.8,25 24.9,26.9 30.4,32.4 39.2,23.8" />
  </g>
  <g>
    <path fill="#010101" d="M32,13c-7.7,0-14,6.3-14,14c0,7.7,6.3,14,14,14s14-6.3,14-14C46,19.3,39.8,13,32,13z M32,38.5 c-6.3,0-11.5-5.1-11.5-11.5c0-6.3,5.1-11.5,11.5-11.5c6.3,0,11.5,5.1,11.5,11.5C43.5,33.3,38.4,38.5,32,38.5z" />
  </g>
</svg>
...