title: How can I make a SVG element to move on the path?
body: <p>I want to move a <code>rect</code> along a <code>path</code>. Therefore I translated the <code>rect</code> so that it's position is the begin of the <code>path</code>. But when I start the animation the <code>rect</code> the translation is interpreted relative to the <code>path</code>. Thus the <code>rect</code> moves with the translation offset along the path.</p>
  <p>Here is an example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600px"
      height="400px"&gt;
      &lt;defs /&gt;
      &lt;path id="path" d="M 100 100 L 100 15 L 500 15 L 500 150" fill="none" stroke="#000000" stroke-width="3"
        stroke-miterlimit="10" pointer-events="none" /&gt;
      &lt;g transform="translate(50,75)"&gt;
        &lt;rect height="50" width="100" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000"&gt;
        &lt;/rect&gt;
        &lt;text x="15" y="28"&gt;Click me !&lt;/text&gt;
        &lt;animateMotion id="move" dur="4.6s" begin="click"&gt;
          &lt;mpath xlink:href="#path" /&gt;
        &lt;/animateMotion&gt;
      &lt;/g&gt;
    &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I make the <code>rect</code> to move on the path?</p>
  <p><strong>EDIT</strong></p>
  <p>I'm looking for a solution that works with multiple different paths. E.g.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;svg viewBox="-100 -130 700 400"&gt;
      &lt;defs /&gt;
      &lt;path id="path" d="M 0 0 L 0 -90 L 500 -90 L 500 150" fill="none" stroke="#ff0000" stroke-width="3"
        stroke-miterlimit="10" pointer-events="none" /&gt;
  
      &lt;path id="path2" d="M 150 0 L 150 90 L -50 90 L -50 150" fill="none" stroke="#ff0000" stroke-width="3"
        stroke-miterlimit="10" pointer-events="none" /&gt;
      &lt;g&gt;
        &lt;rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000" /&gt;
        &lt;text text-anchor="middle" dominant-baseline="middle"&gt;Click me !&lt;/text&gt;
        &lt;animateMotion id="move" dur="4.6s" begin="click"&gt;
          &lt;mpath xlink:href="#path" /&gt;
        &lt;/animateMotion&gt;
      &lt;/g&gt;
  
      &lt;g&gt;
        &lt;rect height="50" width="100" x="100" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000" /&gt;
        &lt;text text-anchor="middle" x="150" dominant-baseline="middle"&gt;Click me !&lt;/text&gt;
        &lt;animateMotion id="move" dur="4.6s" begin="click"&gt;
          &lt;mpath xlink:href="#path2" /&gt;
        &lt;/animateMotion&gt;
      &lt;/g&gt;
    &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>