Is it possible to use a background image on the stroke of an SVG element?

Question

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.

Answer 1

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.

Answer 2

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.