Question

127

rated 0 times [ 134] [ 7] / answers: 1 / hits: 43526 / 9 Years ago, thu, june 25, 2015, 12:00:00

I'm very new to SVG, so please forgive me if this is a basic question.

I would like to draw circles on the screen and respond whenever the user mouses over each circle.

From what I can tell, when listening to mouse events on an svg, we are actually listening to mouse events on the whole canvas and not on the shapes.

If I want to handle events on the shapes, I have to use a library like D3.

Is it possible to listen to mouseOver event that are triggered when the mouse pointer passes over a specific circle?

Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 6

Total Questions: 100

Total Answers: 97

Location: England

Member since Sun, May 21, 2023

1 Year ago

answered 9 Years ago analiseb · Accepted Answer

No library is needed for this. Given the following SVG:

<svg width=500 height=500>



  <circle id=circle1 cx=50 cy=50 r=20 fill=red/>

  <circle id=circle2 cx=150 cy=50 r=20 fill=green/>



</svg>

You could use CSS or Javascript to have these circles change in some way related to the mouse.

For a simple hover in css you can do something like:

#circle1:hover {

  fill: blue;

}

Or any JavaScript mouse event like so:

document.getElementById('circle2').addEventListener('click', function(e) {

    e.currentTarget.setAttribute('fill', '#ff00cc');

});