jQuery,SVG:如何设置属性值(不是样式属性)的动画？

Question

我需要为SVG元素的属性设置动画,它没有CSS对应物 - <circle cx="..." />我该如何实现？

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

有经验吗？

谢谢,Ondra

请注意,这不是重复的如何使用jQuery为属性值(而不是样式属性)设置动画？因为那是关于HTML的.

另请参阅SVG下的jQuery

更新

最后,我使用JQuery和Jquery-svg在SVG draggable中进行了手动动画.

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\xc3\xabl 。

\n\n

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

\n