jQuery、SVG : How to animate an attribute value (not style property)?

Question

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

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

有什么经验吗？

谢谢，昂德拉

请注意，这不是 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 中的值不是用户单位，需要进行转换。参见例如http://www.codedread.com/code.php#dragsvg有关拖动 svg 对象的示例。