javascript - パスストロークからのブラシとしてのhtml svgパターン

Question

ストロークパスの「ブラシ」として機能するパターン（または画像または別のパス）を取得しようとしています。パターンのクリッピング領域のように実際に動作するパスを取得できましたが、それは私が望んでいるものではありません。 http://jsfiddle.net/honkskillet/Yyx3b/ (これは私がこれまでに持っているものであり、私が望むものではありません)

    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">
  <defs>
      <pattern id="Pattern" x="0" y="0" width="10" height="10">
          <rect fill="gray"  x="0" y="0" width="100" height="100"/>
          <path id="testPath" d = "M 000 00 L 50 100 L 100 0"  stroke-width = "5" stroke="black" fill="blue"  />
    </pattern> 

  </defs>

    <path d = "M 200 50 L 300 150 L 200 150 L 200 50"  stroke-width = "20" stroke="url(#Pattern)" fill="red">
    </path>

     <rect fill="url(#Pattern)" stroke="black"  x="0" y="0" width="100" height="100"/>

</svg>

パターン (または画像または別のパス) をパスの方向に沿って配置し、並べて表示したいと考えています。javascript http://codepen.io/honkskillet/pen/AIEpF (パス上のパス)でそれを行う複雑な方法を見つけました が、これを達成する純粋な svg html 方法があるかどうか疑問に思っていました。乾杯

編集

パス HTML にパスを描画する非 html のみのソリューション

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">

      <path id="testpath" d = "M 50 400 Q 150 150  50 150  T150 400"  stroke-width = "10" stroke="blue" fill="none" >
    </path>

</svg>

Javascript

var a = document.getElementById("testpath"),
    len = a.getTotalLength(),
    steps=20,
    p, p1, dp, pa, pb,
    circle;

for(var i =0; i<steps;i++){
    p =   a.getPointAtLength(len*i/steps);
    p1 =   a.getPointAtLength(len*(i+1)/steps);
    dp={x: p.x-p1.x, y:p.y-p1.y};
    pa= {x: (0.67*p.x+0.33*p1.x)-dp.y,  y:(0.67*p.y+0.33*p1.y)+dp.x};
    pb= {x: (0.33*p.x+0.67*p1.x)+dp.y, y:(0.33*p.y+0.67*p1.y)-dp.x};
    circle = document.createElementNS("http://www.w3.org/2000/svg", "path");
    circle.setAttributeNS(null,"d", "M"+p.x+","+p.y+" C"+pa.x+","+pa.y+" "+pb.x+","+pb.y+" "+p1.x+","+p1.y);
    //circle.setAttributeNS(null,"d", "M"+p.x+","+p.y+" L"+pa.x+","+pa.y+" L"+pb.x+","+pb.y+" L"+p1.x+","+p1.y);
    circle.setAttribute("stroke-linecap","round");
    circle.setAttribute("stroke-width", "8");
    circle.setAttribute("stroke", "#336699");
    circle.setAttribute("fill", "none");

    document.getElementById("mySVG").appendChild(circle);

}

これにより、パスに沿って正弦曲線が描かれます。

ただし、存在する場合は、SVG HTML のみのソリューションが必要です。