jquery - HTML5 SVG パスを移動

Question

アプリケーションに次のような SVG パス要素があります。

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

ボタンをクリックすると、このパスを左に、たとえば 100 から 200 に移動する必要があります。次の変換で行いました。

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

しかし、次のクリックでは動かない。クリックするたびにパス要素を移動するにはどうすればよいですか?

score 6 · Accepted Answer

翻訳は、まったく同じことを再度試みます。値を変数に保存し、それを使用する必要があります。

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

この例は、クリックするたびに右に 100 移動できることを示しているため、x に適用したいものを練習すると、笑ってしまうはずです。

1 に答える 1