jquery - 动画 SVG 路径数据

Question

我正在尝试使用 jQuery 为 SVG 的路径数据属性设置动画。

目前，我已经创建了 SVG，并存储了两条路径，以及一个添加动画元素的按钮。

当我直接更改属性（由第一个 svg 显示）时，我取得了成功，尽管动画不会改变第二个 svg 上的任何内容。

$('.svg2 svg path').append('<animate attributeName="stroke-dasharray" from="'+OrigPath+'" to="'+NewPath+' dur="4" repeatCount="1">');

任何帮助都会很棒。这是小提琴：http: //jsfiddle.net/vB8tu/1/

Answer 1

像这样使用 jQuery 添加元素是行不通的。这是因为 jQuery 为新元素使用 HTML 命名空间，而不是 SVG 命名空间。

您将需要使用 jQuerySVG 之类的东西来创建和添加新元素。