Question

假设我有一个简单的圆圈，我想用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在这种情况下不起作用（参见bug http://bugs.jquery.com/ticket/10329）。带有普通dom节点的className也不起作用。

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

Answer 1

是的，但是请注意并非所有属性都适用于svg元素。特别是因为你似乎对transform感兴趣，你应该知道这可能还不适用于svg元素的所有浏览器。如果该属性列为required in SVG 1.1，那么它在今天的浏览器中有更高的可能性。

在svg内容中设置类：

elm.className.baseVal = "yourclass";

或使用setAttribute：

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

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

elm.classList.add("yourclass");

可以找到一些示例here。

是否可以在svg节点上应用css转换？如果有，怎么样？

1 个答案: