Is it possible to use a background image on the st

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.

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

TIA!

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.