SVG Scripting

by Online Tutorials Library July 14, 2022

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

SVG Scripting

SVG Scripting

Example:

Explanation:

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like