用图案填充多边形不适用于传单

Question

我尝试渲染一个充满图案的SVG多边形。填充模式的Svg.Path行不通。正如您在此JSfiddle中看到的那样，填充的背景在Firefox和Chrome中的黑色显示出透明。

该示例基于传单的示例，并使用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>

正如此JSfiddle所示，在地图下方复制SVG多边形，使其在Chrome上起作用，但在Firefox上不起作用。应用填充模式，将此样式添加到SVG.Path：

style="fill: url(#diagonalHatch)"

我真的不确定这是传单中的错误还是与Firefox和Chrome上的SVG实现的冲突。

Answer 1

我为此写了一个传单插件，您可以尝试一下，
https://github.com/lnaweisu/leaflet-polygon-fillpattern

Answer 2

也许您可以尝试通过此线程中提到的形状属性设置路径：带模糊轮廓的传单多边形

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