is dynamic change of css class on svg text taken into account?

Question

I was changing an svg text from bold to normal, and back, with no problem. like :

if ( boldyze_it ){
document.getElementById(zz).style.fontWeight = "bold";
}else{
document.getElementById(zz).style.fontWeight = "normal";
}

I wished to have a full style change, thus changing the css class. like that:

if ( boldyze_it ){
document.getElementById(zz).className = "emphit";
}else{
document.getElementById(zz).className = "clear";
}

and some css declartions, like :

.emphit {
    font-weight : bold;
}

.clear{
    font-weight : normal;
}

but now, I get no effect. did I messed up with something, or is it just that dynamic change of css class does not apply to svg in my browser ?

tanks !

Answer 1

className is an HTML DOM property. It won't work with SVGs. Use setAttribute() instead:

if ( boldyze_it ){
   document.getElementById("zz").setAttribute("class", "emphit");
}else{
   document.getElementById("zz").setAttribute("class", "clear");
}

Demo here