All geek questions in one place

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

As soon as the question arises, Iā€™m trying to find out whether it is possible to use some kind of template or repeated background image for the course of the SVG path.

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

TIA!

+4
source share
2 answers

You can use <pattern> as a stroke, for example.

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

A template can contain <svg> drawing elements or (as here) an image or both.

+9
source

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

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

With this, you can specify the length of the strokes and the spaces between them. For some examples, consider the MDN example page .

+1
source

Source: https://habr.com/ru/post/1485080/

More articles:


All Articles