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

Question

[Hidden Fronter]

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>

Answer 1

[MrColdCoffee]

<object type="image/svg+xml" data="demo.svg"></object>

Comments

[Hidden Fronter]

а можно прописать как-то через CSS источник объекта?

[Максим]

Hidden Fronter, нет

Answer 2

[serega danet]

1. :hover -- это псевдокласс, а не событие.
2. поискал, результат такой, что спецы не советуют помещать cтили в SVG. Есть ограничения.
Я попробовал -- -- ошибка именно на :hover
defs -- тоже не для стилей.
Ввиду сказанного, прекрасно работают стили внешние.
Наследование, :hover , CSS-переменные , animation. @keyframes, ....
Зачем себя ограничивать.

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