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

Question

我弄乱了SVG，但我无法弄清楚为什么我无法在rect元素上切换类。仅在Chrome中测试，但无法正常运行。 这是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

所以，你需要在删除类时将rotate的基本语句添加到元素中，因为svgs在 Chrome <中的转换方式，它仍然具有旋转的属性/强>

正如 @RobertLongson 所指出的，这只是 chrome 的解决方法，因为它在其他浏览器中运行良好。

＆＃13;

＆＃13;

var svg = document.querySelector('svg');


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

＆＃13;

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

.rotate {
    transform: rotate(45deg);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;