Leaflet Polyline with custom fill pattern

Question

I'm drawing Lines with leaflet.js an have to create custom styled polylines. So i got various image files which should be like a repeated background image in HTML. So is it possible to give a drawn L.polyline a Custom background image (texture)?

I know SVG has Support for that but is It also possible via leaflet API?

<defs>
    <pattern id="bad" patternUnits="userSpaceOnUse" x="0" y="0"
     width="10" height="10" viewBox="0 0 10 10" >
        <image x="0" y="0" width="10px" height="10px"
         xlink:href="img/non-sprite/grade_0.png" />
    </pattern>

<defs>

And tried to use the pattern by assign its ID as color/fill without any luck.

L.circle(lat, lng, 200, {fill : 'url(#best)'}).addTo(map);

The circle is shown on map but only in color 0033ff (Leaflet default line color)

Answer 1

This seems to potentially answer your question: https://github.com/bbecquet/Leaflet.PolylineDecorator

I can't' comment on the appropriateness of the method... seems like a lot of code for a simple problem.

Answer 2

Dash array alows you you have a dashed line via svg on a path. No images but you probably don't actually want that.