0

I am trying to get a pattern (or image or another path) to act as a "brush" for the stroke a path. I have been able to get a path to in effect act like a clipping region a pattern, but that's not what I want. http://jsfiddle.net/honkskillet/Yyx3b/ (THis is what I have so far, not what I want)

    <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>

I want the pattern (or image or another path) to be oriented and tiled along the direction of the path. I found a complicated way of doing it in javascript http://codepen.io/honkskillet/pen/AIEpF (path on a path) but I was wondering if there was a pure svg html way of accomplishing this. Cheers

EDIT

A non-html only solution to drawing a path on a path 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);

}

That will draw a sin curve along a path.

I'd still like a SVG HTML only solution if one exists though.

1
  • Haven't been able to find any HTML only way to do this. I did hack together a relatively simple Javascript solution here. Nov 3, 2013 at 4:53

2 Answers 2

2

If you mean you are trying to get a grey and blue zig-zag pattern that follows the line of the stroke, then no, there is no easy/automatic way to do this in SVG.

1
  • Based on my google search research unfortunately I think you are right. I'll probably accept your answer to but I'll leave the question open for a couple days to see if any comments come in. Nov 3, 2013 at 4:37
0
<pattern id="Pattern" x=".1" y=".1" width=".04" height=".04">
3
  • Where are you suggesting I add this in the context of the code snippet? Nov 3, 2013 at 4:36
  • fix x, y, width and height values to <1 Nov 3, 2013 at 4:45
  • That won't do what I want. I want a pattern/image/path to be tiled along a path. Like a brush stroke along a path. Or a zig-zag line that follows the path. Nov 4, 2013 at 5:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.