1

假设我有一个简单的圆圈，我想使用 CSS 对其进行缩放。这种交互将通过侦听圆圈上的点击事件并以某种方式向其添加 CSS 类（结束帧动画类）来完成。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle class='main-circle' cx="100" cy="50" r="40" 
      stroke="black" stroke-width="2" fill="red"/>
</svg>

这个元素的类名是：

circleNode[0].className // SVGAnimatedString {animVal: "main-circle", baseVal: "main-circle"}

jQuery在这里尝试：

http://jsfiddle.net/EHfej/

在这种情况下 jQuery 将不起作用（请参阅错误http://bugs.jquery.com/ticket/10329）。具有普通 dom 节点的 className 也不起作用。

我的猜测是，即使 jQuery 不支持 SVG 上的类操作，它仍然应该是可能的。

4

1 回答 1

3

是的，这是可能的，但请注意并非所有属性都适用于 svg 元素。特别是由于您似乎对此感兴趣，transform因此您应该意识到这可能尚未在所有浏览器中的 svg 元素上都有效。如果该属性在 SVG 1.1 中按要求列出，那么它更有可能在当今的浏览器中工作。

在 svg 内容中设置类：

elm.className.baseVal = "yourclass";

或使用 setAttribute：

elm.setAttribute("class", "yourclass");

Firefox 和 Opera 还支持svg 元素上的HTML5 classList ：

elm.classList.add("yourclass");

一些例子可以在这里找到。

于 2012-12-16T12:01:43.043 回答