svg rect元素上的classList无法正常工作

Question

I'm messing up with SVG and I can't figure out why I can't toggle class on rect element. Tested only in Chrome and it does not work correctly. Here is the JSFiddle :

HTML

<svg>
    <rect x="10" y="10" width="48" height="6"></rect>
</svg>

CSS

body {
    margin: 0;
}
svg {
    cursor: pointer;
}
.rotate {
    transform: rotate(45deg);
}

JS

var svg = document.querySelector('svg');
svg.onclick = function () {
    this.firstElementChild.classList.toggle('rotate');
};

Answer 1

So, you need to add the base statement of the rotate to the element else when you remove the class it still has the property of the rotate due to the way transform in svgs works in Chrome .

As noticed by @RobertLongson this is only a workaround for chrome because it works fine in other browsers.

 var svg = document.querySelector('svg'); svg.onclick = function () { this.firstElementChild.classList.toggle('rotate'); }; 

 body { margin: 0; } svg { cursor: pointer; } svg rect { transform: rotate(0deg); } .rotate { transform: rotate(45deg); } 

 <svg> <rect x="10" y="10" width="48" height="6"></rect> </svg>