jQuery、SVG：如何对属性值（不是样式属性）进行动画处理？

Question

我需要对 SVG 元素的属性进行动画处理，该属性没有 CSS 对应项 - 我怎样才能实现这一目标？

或者，我可以使用替代方案，例如，如果我可以使用 CSS 的 top 或类似的方法对 进行动画处理。

有什么经验吗？

谢谢，Ondra

请注意，这不是 如何使用 jQuery 为属性值（不是样式属性）设置动画？ 因为这是关于 HTML 的。

另请参阅SVG 下的 jQuery

更新

最后，我做了一个手动动画，如 使用 JQuery 和 Jquery-svg 可拖动的 SVG< /a> .

仍然欢迎 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);
 }

设置为比 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< /a> .

Answer 1

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

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

Answer 2

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