SVG JavaScript Script

Using JavaScript, you can write SVG scripts. By scripting, you can modify SVG elements, set animations for them, or listen to mouse events on shapes. When SVG is embedded in an HTML page, SVG elements can be used in JavaScript.

You can write SVG scripts using JavaScript. By writing scripts, you can modify SVG elements, set their animations, or listen for mouse events on shapes.

When SVG is embedded into an HTML page, you can use SVG elements in JavaScript as if they were HTML elements. JavaScript looks the same.

This article shows you how to handle SVG elements with JavaScript, but does not explain JavaScript itself. To understand the examples in this article, you need to have some knowledge of JavaScript.

SVG script example

This is a simple example of writing an SVG script, which changes the dimensions of the SVG rectangle when the button is clicked.

<svg　width="500"　height="100">
　　　　<rect id="rect1" x="10" y="10" width="50" height="80"
　　　　　　　　　　style="stroke:#000000; fill:none"/>
</svg>
<input id="button1" type="button" value="Change Dimensions"
　　　　　　　　　　　　onclick="changeDimensions()"/>
<script>
　　　　function changeDimensions() {
　　　　　　　　document.getElementById("rect1).setAttribute("width", "10);
　　　　}
</script>

Try clicking the button to see what happens.

Get a reference to the SVG element by ID

You can use the document.getElementById() function to get a reference to the SVG shape. Here is an example:

var svgElement = document.getElementById("rect1");

This example retrieves a reference to the element with ID 'rect1of the SVG element (ID specified in the id attribute of the SVG element).

Change property value

Once you have a reference to the SVG element, you can use the setAttribute() function to change its properties. Here is an example:

var svgElement = document.getElementById("rect1);svgElement.setAttribute("width", "10);

This example sets the width property of the selected SVG element. You can use the setAttribute() function to set any other property, including the style property.

You can also use the getAttribute() function to get the value of the property. Here is an example:

var svgElement = document.getElementById("rect1);var width = svgElement.getAttribute("width");

Change CSS properties

By referencing the given CSS properties through the style attribute of the SVG element, you can change the CSS properties of the SVG element. Here is an example of setting the stroke CSS property:

var svgElement = document.getElementById("rect1");
svgElement.style.stroke = "#ff0000";

You can also set any other CSS properties in this way. Just put the name after svgElement.style. on the second line and set it to some value.

You can also read the value of CSS properties through the style attribute. Here is an example:

var svgElement = document.getElementById("rect1");
var stroke = svgElement.style.stroke;

This example reads the value of the stroke CSS property.

CSS property names containing hyphens (such as stroke-width) needs to be referenced through the [''] construction. This is because hyphenated property names are invalid in JavaScript. Therefore, you cannot write

element.style.stroke-width

On the contrary, you must write

element.style['stroke-width']

In this way, you can also use hyphens in the name to refer to CSS properties.

event listeners

You can directly add event listeners to SVG shapes as needed. Just like operating with HTML elements. Here is an example of adding onmouseover and onmouseout event listeners:

<svg　width="500"　height="100">　　　　
<rect x="10" y="10" width="100" height="75"　　　　
style="stroke: #000000; fill: #eeeeee;　　　　
onmouseover="this.style.stroke = '#ff0000'; this.style['stroke-width'] =　5;"　　　　
onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] =　1;"　　　　
/>　　　　
</svg>

This example changes the stroke color and stroke width when the mouse hovers over the rectangle, and resets the stroke color and stroke width when the mouse leaves the rectangle. You can try the following example. Try moving the mouse over the shape and then out again to see the effect of the event listener.

You can also use the addEventListener() function to attach event listeners to SVG elements. Here is an example:

var svgElement = document.getElementById("rect1");
svgElement.addEventListener("mouseover", mouseOver);
function mouseOver() {
　　　　alert("event fired!");
}

This example adds an event listener function named MouseOver to the MouseOver event. This means that the event listener function will be called as soon as the user hovers the mouse over the SVG element.

Animating SVG shapes

To make SVG shapes have animation effects, you need to call the JavaScript function repeatedly. The function is used to change the position or size of the shape. When the function is called repeatedly and the interval is very short, the position or size of the shape will also be updated at a very short interval, making the shape look like an animation.

This is an SVG script animation example. Below the example is the code used to create it. Click the two buttons below the SVG image to start and stop the animation.

This is the code required to generate the above animation:

<svg　width="500"　height="100">
　　　　<circle　id="circle1"　cx="20"　cy="20"　r="10"
　　　　　　　　　　　　style="stroke:　none;　fill:　#ff0000;"/>
</svg>
<script>
　　　　var　timerFunction　=　null;
　　　　function　startAnimation()　{
　　　　　　　　if(timerFunction　==　null)　{
　　　　　　　　　　　　timerFunction　=　setInterval(animate,　20);
　　　　　　　　}
　　　　}
　　　　function　stopAnimation()　{
　　　　　　　　if(timerFunction　!=　null){
　　　　　　　　　　　　clearInterval(timerFunction);
　　　　　　　　　　　　timerFunction　=　null;
　　　　　　　　}
　　　　}
　　　　function　animate()　{
　　　　　　　　var　circle　=　document.getElementById("circle1");
　　　　　　　　var　x　=　circle.getAttribute("cx");
　　　　　　　　var　newX　=　2　+　parseInt(x);
　　　　　　　　if(newX　>　500)　{
　　　　　　　　　　　　newX　=　20;
　　　　　　　　}
　　　　　　　　circle.setAttribute("cx",　newX);
　　　　}
</script>
<br/>
<input type="button" value="Start Animation" onclick="startAnimation();">
<input type="button" value="Stop Animation" onclick="stopAnimation();">

Both HTML buttons are attached with an onclick listener. These listeners call the startAnimation() and stopAnimation() functions to start and stop the animation. The animation starts by setting a timer that runs every2milliseconds call the Animate() function. Clearing this timer function again stops the animation.

The animation is executed within the animate() function. First, the function obtains a reference to the <circle> element within the SVG image using the document.getElementById() function. Then, the cx attribute of the circle is read and converted to a number. Then, the2added to the cx value. If the new x value is greater than500, then reset it to2The new x value is placed back into the cx attribute of the <circle> element. The circle thus moves to the new x position.