How to add a texture to the stroke of a Bezier curve in an svg?

Question

Not to fill a region bounded by a bezier curve and a line.

E.g. here's a very simple stroked Bezier curve

<?xml version="1.0" standalone="no"?>
<svg width="160" height="80" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
        stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
</svg>

Then intuitively we would want to set the stroke attribute value from "black" to something like "./assets/62562367236.jpg". But it doesn't work this way.

<?xml version="1.0" standalone="no"?>
<svg width="160" height="80" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="40 60 80 20 120 60" stroke="https://media.freestocktextures.com/cache/0d/42/0d42eeb83ad3a56c97468d69721b2c18.jpg" stroke-width="20"
        stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
</svg>

Whereas practically what I'd want is something like what's depicted here:

Please take a look at this example: https://codepen.io/enxaneta/pen/6f3b5b7ad8bf46fe05a7f25e626513ba where the stroke is a pattern — enxaneta, Nov 24 '21 at 21:28
The solution to this is the same as [Fill SVG path element with a background-image](https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image) but for the `stroke` rather than `fill` attribute: create a pattern definition with an `id`, then point to that by fragment identifier in the attribute. — Mike 'Pomax' Kamermans, Nov 24 '21 at 22:17
@Mike'Pomax'Kamermans, for some reason it didn't work out with stroke for me. — Kukuster, Nov 24 '21 at 23:03
But the example submitted by @enxaneta did work out! Thanks, guys! Would you say i should post the corresponding answer? Or should we put down this Q? — Kukuster, Nov 24 '21 at 23:03
works fine for me using the example code from that answer, so as far as I can tell this question is just a straight duplicate. — Mike 'Pomax' Kamermans, Nov 24 '21 at 23:04
on the other hand, it wasn't really obvious how to get to that answer for `fill` and then extrapolate that to `stroke`... — Kukuster, Nov 24 '21 at 23:06
other than that, I would take your word for it and close the Q — Kukuster, Nov 24 '21 at 23:09
not obvious how? You copy the `` from that answer, put it in your SVG document, put in your own image's url, and and set `stroke="url((#img1) black"` on your polyline (or whatever more appropriate `id` you renamed it to). The answer even links to the spec for the pattern element, which has several source examples of full SVG documents that use them if you scroll down. — Mike 'Pomax' Kamermans, Nov 24 '21 at 23:21
ok, got it. Sorry, I might have made a mistake somewhere, but now i see how this works. And i see the specs do explain it btw. It just wasn't googlable for me. But i agree that it's in the specs. — Kukuster, Nov 25 '21 at 00:20

Alexandr_TT · Accepted Answer · 2021-11-25T15:10:17.907

As pointed out in the comment @Mike 'Pomax' Kamermans

create a pattern definition with an id, then point to that by fragment identifier in the attribute

I added the curve code and calculated the required dimensions for the pattern

<style>
.container {
width:25vw;
height:auto;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 180 180">
      <defs>
        <pattern id="patt" patternUnits="userSpaceOnUse" width="170" height="170">
          <image href="https://media.freestocktextures.com/cache/0d/42/0d42eeb83ad3a56c97468d69721b2c18.jpg"
                 x="0" y="0" width="680" height="460" />
        </pattern>
      </defs>
       <path id="path" d="M25.21 135.78s55.95 5.97 81.76-14.4c38.26-30.2  31.7-76.72 31.7-76.72" 
       fill="none" stroke="url(#patt)" stroke-width="32"
         stroke-linecap="round" />
    </svg> 
</div>

How to add a texture to the stroke of a Bezier curve in an svg?

1 Answers1