Bug (?) svg circle Hover

Hi all !
Seems that hover on svg element “circle” isn’t working (Mac, Ps 22.3.1)

According to this link, some svg behaviour can be uncanny:
https://www.adobe.io/photoshop/uxp/uxp/known-issues/

  • Not all SVG files are supported by UXP. UXP’s SVG renderer is targeted for simple icons and the like; complex SVGs may fail to render completely, or may render in unexpected ways. The SVG renderer will improve in the future.
    (…)
  • Many SVGs are known to render in odd ways in the UI. These issues will be addressed in the future, but we would love to hear your reports of any SVGs that don’t work, and how you fixed it.

Would someone be kind enought to test this?

Cheers!

HTML:

<svg width="100" height="100">
  <circle id="circle1" cx="15" cy="50" r="10" fill="red" />
  <circle id="circle2" cx="55" cy="50" r="10" fill="green" />
</svg>

CSS:

#circle1:hover {
  fill: blue;
}

JS:

document.getElementById('circle2')
  .addEventListener('click', function(e) {
  e.currentTarget.setAttribute('fill', 'magenta');
});

Expected behaviour:

  • the red circle when hover should turn blue
  • the green circle when clicked should turn magenta

Hi,

I encountered the same issue.

My workaround was something like this:

<svg width="100" height="100" id="svgEl">
  <circle id="circle1" cx="15" cy="50" r="10" fill="red" />
</svg>
#svgEl:hover > #circle1 {
    fill: blue;
}

It seems only the hover of the outer svg element is registered.

I encountered the same issue, I partially bypassed the problem as tomzag, but there are cases where it is complicated to solve in this way.
hope this bug is fixed

@tomzag , @svumme , thank you guys !
Good to know that someone else pumped into this too.
Issues remains if you have several circle elements in the <svg> container: it’s not possible to have the hover respond to each circle individually… oh well… I’ll have to do without it then… Hoping this gets fixed somewhere down the line…
Cheers!