4

Just as the question asks - I'm trying to figure out whether or not it's possible to use some kind of pattern or repeated background image for the stroke of an SVG path.

Is this doable? Or are you limited to colors only?

TIA!

grammar
  • 871
  • 10
  • 22

2 Answers2

10

You can use a <pattern> as a stroke e.g.

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32">
          <image xlink:href="http://phrogz.net/tmp/alphaball-small.png" width="32" height="32" />
        </pattern>
      </defs>
      <rect stroke-width="32" stroke="url(#p1)" width="200" height="200" fill="none"/>
    </svg>

The pattern can contain <svg> drawing elements or (as here) an image, or both.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
1

You can use the property stroke-dasharray for "patterns" in the stroke:

<line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />

With this you can specify the length of strokes and gaps between. For some examples have a look at the MDN example page.

Sirko
  • 72,589
  • 19
  • 149
  • 183
  • Thanks for your answer, but I was more leaning towards repeating a background image for the stroke than a dasharray. – grammar Jun 07 '13 at 16:25