移动 HTML5 SVG 路径

【问题标题】：Move HTML5 SVG path移动 HTML5 SVG 路径
【发布时间】：2012-05-22 20:27:21
【问题描述】：

我的应用程序中有一个 SVG 路径元素，例如：

<path d="M100,100 Q200,400,300,100"/>

在按钮单击中，我必须将此路径向左移动，例如，从 100 到 200。我通过变换做到了：

$('.path').each(function () {
    $(this).attr('transform', 'translate(100, 0)');
});

但是，在下一次单击时它不会移动。如何让路径元素在每次点击时移动？

【问题讨论】：

【解决方案1】：

翻译会再次尝试做同样的事情。您需要将值存储在变量中并使用它：

var x=0;
$('.path').each(function () {
   x += 100;
   $(this).attr('transform', 'translate('+x+', 0)');
});

这个例子表明你可以在每次点击时将它向右移动 100，所以锻炼你想要应用到 x 的东西，你应该会笑的。

【讨论】：