Javascript In SVG

I created a SVG file contains 5 polygons, then I need to embed Javascript so 4 of the polygons' color changes to Red when mouseover, and when mouseout, the color changes to Green.

Solution 1:

For what you are doing I would recommend using pure CSS.

Here is some working code.

svg:hover .recolor {
    fill: red;     
}

As you see, you can just use the :hover event in CSS to recolor the necessary elements. And set them to your default color (green), which will take effect when the user is not hovered.

Solution 2:

You have various errors

1. you've two functions called changeColor, functions must have unique names

2. SVG does not use color to colour elements, instead it uses fill (and stroke).

3. id values must be unique, you probably want to replace id by class and then use getElementsByClassName instead of getElementById. If you do that you'll need to cope with more than one element though. I've not completed that part, you should try it yourself so you understand what's going on.

I've removed all but one id from my version so you can see it working on the left eye.

document.getElementById("test").onmouseover = function(){changeColor()};

function changeColor() {
document.getElementById("test").style.fill = "red";
}

document.getElementById("test").onmouseout = function(){changeColor2()};

function changeColor2() {
document.getElementById("test").style.fill = "green";
}

<svg width="26cm" height="24cm" viewBox="0 0 2600 2400" version="1.1" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink= "http://www.w3.org/1999/xlink">

<circle cx="1600" cy="700" r="600" fill="yellow" stroke="black" stroke-width="3"/>
<ellipse id="test" cx="1300" cy="500" rx="74" ry="120" fill="blue" stroke="black"  stroke-width="3"/>
<ellipse cx="1850" cy="500" rx="74" ry="120"  fill="blue" stroke="black" stroke-width="3" />
<rect x="1510" y="650" width="160" height="160" fill="blue" stroke="black" stroke-width="3" />
<polygon points="1320,800 1370,1080 1820,1080 1870,800 1820,1000 1370,1000" name="mouth" fill="blue" stroke="black" stroke-width="3"/> 

</svg>