SVGs have their own DOM (Document Object Model), which is simply a programming interface that allows the SVG, and elements contained within the SVG, to be controlled via code. Creation, removal, animation, changing shape and color - all are possible using JavaScript and CSS.
ALL attributes of an svg element - positioning, orientation, color, etc. - can be changed with javascript.
For example, let’s say we have a simple SVG that contains a purple circle. We can change the color of the circle from purple to green by changing the value of the fill attribute.
1
2
3
4
5
6
7
8
9
<svg width="500" height="500" viewbox="0 0 500 500">
<circle
id="my_circle"
cx="250" cy="250" r="150"
stroke="black"
stroke-opacity=".5"
stroke-width="10"
fill="purple" />
</svg>REFER TO A BLANK PAGE THAT THEY CAN ADD CODE TO!!!
To do so, we’ll first need to create a reference to the circle element.
1
2
3
<script>
let my_circle = document.getElementById("my_circle");
</script>You can then change an element's attributes using the setAttribute method.
The setAttribute method has two parameters. The first is the name of the attribute you wish to change, and the second is the new value you wish to assign to the attribute.
element.setAttribute(name, value)
Now let’s change the fill, stroke, stroke-width, and stroke-opacity:
1
2
3
4
5
6
7
<script>
let my_circle = document.getElementById("my_circle");
my_circle.setAttribute('fill', 'blue');
my_circle.setAttribute('stroke', 'orange');
my_circle.setAttribute('stroke-width', '20');
my_circle.setAttribute('stroke-opacity', '1');
</script>The text element is no different from any of the other shape elements. Here we change a text element's fill from black to red and the font-size to 60.
textElement.setAttribute(<attribute name>, <value>)
1
2
3
4
5
6
7
8
9
10
<svg width="500" height="200" viewbox="0 0 500 200">
<text
id="my-text"
fill="black"
font-size="30"
...
>
hello world
</text>
</svg>1
2
3
4
5
<script>
const myText = document.getElementById("my-text");
myText.setAttribute("fill", "red");
myText.setAttribute("font-size", 60);
</script>Changing the text contained in a text element is quite simple, and virtually identical to how you would do so with ordinary html text. Simply create a reference to the text element and use firstChild.textContent to set the content. In this example, I've replaced the original "hello world" text with a different text string.
textElement.firstChild.textContent = "new text"
1
2
3
4
<script>
const myText = document.getElementById("my-text");
myText.firstChild.textContent = "Dynamically changing text content";
</script>What if you wanted to retrieve the value of an element attribute? You would use the getAttribute method.
element.getAttribute("<name>")
1
2
3
4
5
6
7
8
9
10
<svg width="300" height="300" viewbox="0 0 00 500">
<circle id="my_circle" cx="150" cy="150" r="100" fill="purple" />
</svg>
<script>
let my_circle = document.getElementById("my_circle");
let fill_value = my_circle.getAttribute("fill");
// fill_value = "purple"
</script>The getAttribute method is particularly useful when animating elements, as we’ll see later in the course