0

If I have the following svg:

<svg>
  <circle cx="20" cy="20" r="10" fill="rgb(0,0,0)" />
  <circle cx="80" cy="80" r="10" fill="rgb(0,0,0)" />
  <rect x="0" y="0" width="100" height="100" fill="rgba(0,0,0,0.0)" />
</svg>

and if I add an onmousemove listener to all three objects, only the transparent rectangle in front will pick up the mouse move. Assuming the mouse is over one of the circles, is there a way to trigger onmousemove on the front rect and the circle underneath. IIRC, pointer-events:none can be used to ignore the mouse event on the upper rect, but this is not what I'm looking for - I'm looking for onmousemove to be called on both objects.

Thanks in advance for any tips!

Mike
  • 716
  • 4
  • 10
  • Please take a look at this answer: https://stackoverflow.com/questions/55906822/how-to-make-an-hover-effect-on-two-overlapping-shapes-in-svg/55909387#55909387 – enxaneta Mar 08 '22 at 12:58
  • Thanks for that! I wound up redesigning my app in a more idiomatically dom-y way to avoid this problem. – Mike Mar 09 '22 at 13:23

0 Answers0