@AlTerminator

Как в файле svg заставить работать события?

Hover не работает.

HTML
<object type="image/svg+xml" data="PageUpDown"></object>


CSS
header object[data="PageUpDown"]
{
 content: url("images/PageUpDown.svg");
}


SVG
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">

<defs>
 <style>
  svg:hover path{
   fill: yellow;
  }
 </style>
</defs>

 <path fill-rule="evenodd" clip-rule="evenodd" d="M54 20.882V33.618L32 22.618L10 33.618V20.882L32 9.88196L54 20.882ZM52 22.118L32 12.118L12 22.118V30.382L32 20.382L52 30.382V22.118Z" fill="red"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M54 42.882V55.618L32 44.618L10 55.618V42.882L32 31.882L54 42.882ZM52 44.118L32 34.118L12 44.118V52.382L32 42.382L52 52.382V44.118Z" fill="gold"/>
</svg>
  • Вопрос задан
  • 761 просмотр
Решения вопроса 1
@MrColdCoffee
web
<object type="image/svg+xml" data="demo.svg"></object>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@seregadushka
minsk
1. :hover -- это псевдокласс, а не событие.
2. поискал, результат такой, что спецы не советуют помещать cтили в SVG. Есть ограничения.
Я попробовал -- -- ошибка именно на :hover
defs -- тоже не для стилей.
Ввиду сказанного, прекрасно работают стили внешние.
Наследование, :hover , CSS-переменные , animation. @keyframes, ....
Зачем себя ограничивать.

Пишешь svg class="name" .... Внешний .name {...}.
Во внешних стилях все работает -- SVGmy
СТРОКА 1884 -- -- стиль для всех картинок одинаковый , 13 строк.
Можно смотреть , какие SVG подчиняются стилям, какие не хотят. Но частично анимируются все.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы