用图案填充多边形不适用于传单 [英] Fill polygon with pattern doesn't work with leaflet

问题描述

我尝试渲染填充有图案的SVG多边形.充满模式的SVG.path不起作用.如您在 jsfiddle 中所看到的，填充的背景在Firefox中显示为透明，在Chrome中显示为黑色.

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.

该示例基于 leaflet GeoJSON示例，并使用了 carto.net .

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>

如 jsfiddle 所示，将SVG多边形复制到地图下方，使其可以在Chrome上运行，但是不在Firefox上.应用将这种样式添加到SVG.path的填充模式:

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)"

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

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

推荐答案

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

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

这篇关于用图案填充多边形不适用于传单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！