Modify SVG element classes with JavaScript
I wanted to use vanilla javascript to change the class of an SVG element. It was a bit trickier than I expected, but the answer is really simple.
Usually I change the class of some HTML element like this:
<!--STARTING HTML-->
<p id="element-id" class="old-class">Some arbitrary text</p>//Javascript
var htmlElement = document.getElementById(“element-id”);
htmlElement.className = “new-class";<!--RESULT HTML-->
<p id="element-id" class="new-class">Some arbitrary text</p>
Recently I had occasion to implement something similar with an SVG Element. My goal was for a certain circumstance to display an SVG line on the HTML page. I did this by creating an SVG line on my HTML page with a class “invisible” The invisibility I set in css like so .invisible{display:none}
Easy peasy, I thought I could use my usual strategy (see above) to wipe out the invisible class and therefore show the SVG line. In other words, I thought this would work:
<!-- STARTING HTML -->
<svg id ="svg-parent" class = "invisible" height="210" width="500">
<line id = "line-one" class = "invisible" x1="15" y1="15" x2="300" y2="300"/>
<line id = "line-two" class = "invisible" x1="15" y1="300" x2="300" y2="15"/>
</svg>// JAVASCRIPT
//display svg line of element described by function parameter
var svgParent = document.getElementById(“svg-parent”);
var svgElement = document.getElementById("line-one");
svgParent.className = “”; //remove class "invisible"
svgElement.className = “”; //remove class "invisible"<!-- EXPECTED RESULT-->
<svg id ="svg-parent" class = "" height="210" width="500">
<line id = "line-one" class = "" x1="15" y1="15" x2="300" y2="300"/>
<line id = "line-two" class = "invisible" x1="15" y1="300" x2="300" y2="15"/>
</svg><!-- ACTUAL RESULT (no change)-->
<svg id ="svg-parent" class = "invisible" height="210" width="500">
<line id = "line-one" class = "invisible" x1="15" y1="15" x2="300" y2="300"/>
<line id = "line-two" class = "invisible" x1="15" y1="300" x2="300" y2="15"/>
</svg>
In other words, it didn’t work, nothing happened. Upon further investigation in the console
console.log(svgParent.className )//expected console result
invisible// actual console result:
SVGAnimatedString {} ..
Well that’s goofy.
I struggled finding much information on this behavior. A few people were saying jQuery was doing jack with classes on SVG elements, but otherwise silence.
Thank god I found this guy and his never-upvoted post
The answer is really freaking simple. Grab the base value of the SVGAnimatedString with a simple .baseVal added to the end of .className.
Here is what finally worked:
// JAVASCRIPT
//display svg line of element described by function parameter
var svgParent = document.getElementById(“svg-parent”);
var svgElement = document.getElementById("line-one");
svgParent.className.baseVal = “”; //remove class "invisible"
svgElement.className.baseVal = “”; //remove class "invisible"<!-- ACTUAL RESULT-->
<svg id ="svg-parent" class = "" height="210" width="500">
<line id = "line-one" class = "" x1="15" y1="15" x2="300" y2="300"/>
<line id = "line-two" class = "invisible" x1="15" y1="300" x2="300" y2="15"/>
</svg>
In case you’re curious about the application of this:
