jQuery，SVG：如何设置属性值（不是样式属性）的动画？

Question

我需要为SVG元素的属性设置动画，该元素没有CSS对应物 - <circle cx="..." />我怎样才能实现这一目标？

或者，我可以使用替代方案，例如如果我可以使用CSS的<g/>或类似内容为top制作动画。

有经验吗？

谢谢，Ondra

请注意，这不是How can I animate an attribute value (not style property) with jQuery?的重复，因为那是关于HTML的。

另见jQuery under SVG

更新

最后，我在SVG draggable using JQuery and Jquery-svg中进行了手动动画。

jQuery解决方案仍然受欢迎。

无论如何，这让我遇到了其他问题 - 单位不匹配。 evt.clientX以像素为单位，但circle.cx.baseVal.value以某些相对单位表示。所以当我做的时候

    onmousedown="
      this.moving=true; 
      this.pt0 = {x: evt.clientX, y: evt.clientY}; 
      this.origPos = {x: this.cx.baseVal.value, y: this.cy.baseVal.value};
    "
 onmouseup="this.moving=false;"
 onmouseout="this.moving=false;"
 onmouseover="this.moving=false;"
 onmousemove="if( this.moving ){
   this.cx.baseVal.value = this.origPos.x + (evt.clientX - this.pt0.x);
 }

并且<embed>比SVG的“自己”大小大3倍，然后圆圈比指针移动快3倍。

更新

我甚至尝试过

this.origPos = {
    x: this.cx.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX), 
    y: this.cy.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX)
};

...


this.cx.baseVal.newValueSpecifiedUnits(
   SVGLength.SVG_LENGTHTYPE_PX, this.origPos.x + (evt.clientX - this.pt0.x) );

但convertToSpecifiedUnits()会返回undefined，这似乎缺乏http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength的实施。

Answer 1

jQuery本身可能无法满足您对简单svg拖放（此时）的要求，因此您必须使其执行您想要的操作或使用其他js框架。我建议你看一下raphaël。

event.clientX / Y中的值不是用户单位，需要转换它们。有关拖动svg对象的示例，请参见例如http://www.codedread.com/code.php#dragsvg。

Answer 2

对于任何有兴趣的人来说，jQuery插件项目http://keith-wood.name/svg.html对于动画SVG元素非常有用。