或者,我可以使用替代方案,例如如果我可以动画< g />使用CSS的顶级或类似.

有经验吗？

谢谢,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的实现.