Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG Scripting


SVG + JavaScript

SVG can be used together with JavaScript to modify and animate SVG elements.


SVG Simple Script

In this example, we create a red circle with a radius of 25. Click the button to change the radius to 50:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle1" cx="50" cy="50" r="25" style="fill:red;" />
</svg>

<input type="button" value="Change Radius" onclick="changeRadius()" />

<script>
function changeRadius() {
  document.getElementById("circle1").setAttribute("r", "50");
}
</script>
Try it Yourself »

Code explanation:

  • Add an id attribute to the <circle> element
  • Create a script within <script> tags
  • Get a reference to the SVG element with the getElementById() function
  • Change the r attribute using the setAttribute() function
  • Add an <input type="button"> element to run the JavaScript when clicked


SVG Change CSS

In this example, we create a red circle. Click the button to change the fill color to green:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle2" cx="50" cy="50" r="25" style="fill:red;" />
  Sorry, your browser does not support inline SVG.
</svg>

<input type="button" value="Change Style" onclick="changeStyle()" />

<script>
function changeStyle() {
  document.getElementById("circle2").style.fill="green";
}
</script>
Try it Yourself »

Code explanation:

  • Add an id attribute to the <circle> element
  • Create a script within <script> tags
  • Get a reference to the SVG element with the getElementById() function
  • Set a new fill color with style.fill
  • Add an <input type="button"> element to run the JavaScript when clicked

SVG Change Attribute Values and CSS

In this example, we create a red circle. Click the button to change the radius, the x position, fill color, and add a stroke color:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle3" cx="50" cy="60" r="25" style="fill:red;" />
</svg>

<input type="button" value="Change Circle" onclick="changeMe()" />

<script>
function changeMe() {
  var c = document.getElementById("circle3");
  c.setAttribute("r", "50");
  c.setAttribute("cx", "150");
  c.style.fill="green";
  c.style.stroke="red";
}
</script>
Try it Yourself »

SVG Script for Animation

In this example, we create a red circle. Click the two buttons to start and stop the animation:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="600" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle4" cx="50" cy="50" r="50" style="fill:red;" />
</svg>

<script>
var t = null;

function start() {
  if(t == null) {
    t = setInterval(animate, 20);
  }
}

function stop() {
  if(t != null) {
    clearInterval(t);
    t = null;
  }
}

function animate() {
  var circle = document.getElementById("circle4");
  var cx = circle.getAttribute("cx");
  var newCX = 2 + parseInt(cx);
  if(newCX > 600) {
    newCX = 50;
  }
  circle.setAttribute("cx", newCX);
}
</script>

<br/>
<input type="button" value="Start" onclick="start()" />
<input type="button" value="Stop" onclick="stop()" />
Try it Yourself »

Code explanation:

  • The start() and stop() functions start and stop the animation
  • The animation starts by setting up a timer (t) which calls the animate() function every 20 milliseconds with the setInterval() function
  • The animation is stopped by clearing the t timer
  • The animation is performed inside the animate() function
  • Get a reference to the <circle> element with the getElementById() function
  • Get the value of the cx attribute with the getAttribute() function
  • Convert the value of the cx attribute to a number with parseInt(). Then add 2 to the cx value
  • Test if the newCX value is larger than 600 (which is the width of the SVG "window"), then reset it to 50 (which is the original start position)
  • Put the newCX value into the cx attribute of the <circle> element with the setAttribute() function. This moves the circle to the new cx-position

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.