Question

我尝试渲染一个填充了pattern的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多边形复制到地图下方，使其可以在Chrome上运行，但不能在Firefox上运行。应用将此样式添加到SVG.path的填充模式：

style="fill: url(#diagonalHatch)"

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

Answer 1

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

Answer 2

也许您可以尝试通过此主题中提到的形状属性设置路径：Leaflet polygon with fuzzy outline

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

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

2 个答案: