2

svg g:hover {
  fill: red;
}

svg:hover {
  fill: white;
}
<svg width="300" height="100">
 <defs>
   <filter id="shadow" x=-50% y=-50% width=200% height=200%>
       <feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="#333" flood-opacity=".1" />
    </filter>
  </defs>
  <g fill="#fdd">
  <rect filter="url(#shadow)" width="270" height="60" x="15" y="15" rx="25" />
  <polygon points="280 50  260 70  290 85" />
  </g>
  <text x="50%" y="50%"font-size="20" text-anchor="middle" font-family="Gilroy Medium ">Этот кот в SVG</text>
</svg>

Подскажите, при наведении на text, svg должна сохранять fill:red; как реализовать?

0

1 ответ 1

4

svg:hover text

<svg width="300" height="100">
 <defs>
   <style>
     text{
       pointer-events: none;
     }
     svg:hover text{
       fill: #fff;
     }
     svg g:hover{
       fill: red;
     }
   </style>
   <filter id="shadow" x=-50% y=-50% width=200% height=200%>
       <feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="#333" flood-opacity=".2" />
    </filter>
  </defs>
  <g fill="#fdd">
  <rect filter="url(#shadow)" width="270" height="60" x="15" y="15" rx="25" />
  <polygon points="280 50  260 70  290 85" />
  </g>
  <text x="50%" y="50%"font-size="20" text-anchor="middle" font-family="Gilroy Medium ">Этот кот в SVG</text>
</svg>

1

Ваш ответ

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

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