Fill polygon with pattern doesn't work with leaflet

Question

I try to render a SVG polygon filled with pattern. SVG.path filled with pattern doesn't work. As you can see in this jsfiddle, filled background shows up transparent in Firefox and black in Chrome.

The example is based on leaflet GeoJSON Example and uses the diagonalHatch pattern described by carto.net.

<defs>
    <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" x="0" y="0" width="105" height="105">
        <g style="fill:none; stroke:black; stroke-width:1">
            <path d="M0 90 l15,15"/><path d="M0 75 l30,30"/>
            <path d="M0 60 l45,45"/><path d="M0 45 l60,60"/>
            <path d="M0 30 l75,75"/><path d="M0 15 l90,90"/>
            <path d="M0 0 l105,105"/><path d="M15 0 l90,90"/>
            <path d="M30 0 l75,75"/><path d="M45 0 l60,60"/>
            <path d="M60 0 l45,45"/><path d="M75 0 l30,30"/>
            <path d="M90 0 l15,15"/>
        </g>
    </pattern>
</defs>

As this jsfiddle shows, copying the SVG polygons below the map, makes it work on Chrome but not on Firefox. Apply a fill pattern adding this style to SVG.path:

style="fill: url(#diagonalHatch)"

I'm really not sure if this is a bug in leaflet or some conflict with SVG implementation on Firefox and Chrome.

Answer 1

I've wrote a leaflet plugin for this, you may try it,
https://github.com/lnaweisu/leaflet-polygon-fillPattern

Answer 2

Maybe you can try setting the path via the shape's attribute as mentioned in this thread: Leaflet polygon with fuzzy outline

// Set filter attribute on the polygon
polygon._path.setAttribute('filter', 'url(#blur)');