我尝试渲染一个填充了图案的SVG多边形 . 填充模式的SVG.path不起作用 . 正如您在jsfiddle中看到的那样，填充的背景在Firefox中显示为透明，在Chrome中显示为黑色 .
该示例基于leaflet GeoJSON Example，并使用carto.net描述的diagonalHatch模式 .
<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>
正如jsfiddle所示，将SVG多边形复制到 Map 下方，使其可以在Chrome上运行，但不能在Firefox上运行 . 应用将此样式添加到SVG.path的填充模式：
style="fill: url(#diagonalHatch)"
我真的不确定这是传单中的错误还是与Firefox和Chrome上的SVG实现有些冲突 .
2 回答
我为此写了一个传单插件，你可以尝试一下，
https://github.com/lnaweisu/leaflet-polygon-fillPattern
也许您可以尝试通过此线程中提到的shape属性设置路径：Leaflet polygon with fuzzy outline