title: SVG - Duplicate image along path
body: <p>I am currently trying to create a bicycle chain via SVG and javascript.</p>
  
  <p>The result I am trying to create will look something like this:
  <img src="https://thumbs.dreamstime.com/z/roller-chains-sprockets-motorcycles-white-background-54666684.jpg" alt="bicycle chain"></p>
  
  <p>The problem I am having is how to repeat a single chainlink image along the path of the chain. I want to be able to use a chainlink image (For example: <img src="https://openclipart.org/image/800px/svg_to_png/179955/Thav-Bike-Chain-Link.png" alt="chainlink">
  and then repeat this along the path that I define.</p>
  
  <p>I know that it is trivial to repeat text along a path via SVG but is it possible to do the same with an image? The complexity comes from the fact that the chainlink will have to appear as one continuous line. </p>
  
  <p>Here is what I have so far:</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;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
    &lt;svg width="700" height="500"&gt;
     &lt;path id="ChainPath" fill="none" stroke="red" d="M150 100 L400 100 C650 100 650 400 400 400 L150 400" /&gt;
  
     &lt;text&gt;
      &lt;textPath href="#ChainPath" alignment-baseline="middle"&gt;
       0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
      &lt;/textPath&gt;
     &lt;/text&gt;
    &lt;/svg&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be greatly appreciated.
  Thanks</p>