SVG Scripting

Using the JavaScript, it is possible to script the SVG. Through scripting, you can modify the SVG elements, animate them or listen for mouse events on the shapes.

You can work with SVG elements in JavaScript when SVG is embedded in an HTML page.

Example:

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="150">

<rect id="rect1" x="20" y="20" width="70" height="80"
       style="stroke: black; stroke-width: 2; fill:purple; fill-opacity: .5;"/>
</svg>
<input id="button1" type="button" value="Change Dimensions"
            onclick="changeDimensions()"/>

<script>
    function changeDimensions() {
        document.getElementById("rect1").setAttribute("width", "120");
        document.getElementById("rect1").setAttribute("height", "100");
    }
</script>
</body>
</html>

Test it Now

Explanation:

Using the document.getElementById() function, you can obtain a reference to an SVG shape.
The setAttribute() function is used to change the value of attributes.

Next TopicEvent Listener

← prev next →