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

【问题标题】：jQuery, SVG: How to animate an attribute value (not style property)?jQuery，SVG：如何为属性值（不是样式属性）设置动画？
【发布时间】：2011-03-30 17:18:59
【问题描述】：

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

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

有什么经验吗？

谢谢，昂德拉

请注意，这不是 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的实现不足。

【问题讨论】：

标签： jquery animation svg attributes jquery-animate

【解决方案1】：

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

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

【讨论】：

谢谢埃里克。实际上，我让 jQuery 可以工作，但仅适用于 CSS 属性。我会看看是否很容易使元素的道具动画化。结果应该是带有节点和导航的图形可视化（加载新节点，隐藏一些当前节点）。 Rapael 会帮助实现这一目标吗？
让它为属性设置动画可能并不难，尽管有些需要更多的工作，例如路径动画。如果您正在寻找代码，我们在svg-wow.org（CC0 许可）上提供了一些示例，这些示例可能会有所帮助。例如，看看 [这里][1] 完成的动画（基于 YUI2 扩展）。 [1]svg-wow.org/animations/svg-wow.html

【解决方案2】：

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

【讨论】：