Fill polygon with pattern doesn't work with leaflet

问题

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.

回答1:

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

回答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)');

来源：https://stackoverflow.com/questions/21526253/fill-polygon-with-pattern-doesnt-work-with-leaflet

标签

svg

polygon

leaflet

fill