Javascript svg rect元素上的classList没有像我预期的那样工作

我搞砸了SVG，我不明白为什么不能在rect元素上切换类。仅在铬合金中测试，无法正常工作。 以下是：

HTML

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

JS

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

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

---

因此，您需要将

rotate

的base语句添加到元素中，否则当您删除类时，它仍然具有rotate属性，这是因为svgs中的transform在Chrome中的工作方式

正如@RobertLongson所注意到的，这只是chrome的一个变通方法，因为它在其他浏览器中工作良好

var svg=document.querySelector（'svg'）；
svg.onclick=函数（）{
this.firstElementChild.classList.toggle（'rotate'）；
};
正文{
保证金：0；
}
svg{
光标：指针；
}
svg矩形{
变换：旋转（0度）；
}
.轮换{
变换：旋转（45度）；
}

你的JSFIDLE在firefox 38.0.5oops上运行良好，我忘了说我只在Chrome上测试过它。在我的Chrome（43.0.2357.130 m）上也可以运行良好。如果你将它添加到css中：
svg rect{transform:rotate（0deg）}
，它能工作吗？问题不是第一次旋转，而是切换。它不会回到初始状态，对吗？你是说这是CSS转换规范所必需的，还是说你将此答案作为Chrome bug的解决方法？我认为这是必要的，因为旋转在SVG中与Chrome一起工作。我可能错了。所以是的。这是一个解决办法。你是对的。Thanks@RobertLongson编辑了答案，说这只是一个解决办法。谢谢