Question

我尝试修改Leaflet的Path.SVG.js，以便生成以下SVG标记。

<svg class=" leaflet-zoom-animated" width="2698" height="318" viewBox="-995 12 2698 318" style="-webkit-transform: translate3d(-995px, 12px, 0);">
<defs>
    <pattern id="rank1" x="0" y="0" height="28pt" width="28pt" patternUnits="userSpaceOnUse">
        <image xlink:href="https://googledrive.com/host/0B9FPQIuJQjY3eTlWMFZBWUxiY1E/pattern5.png" height="28pt" width="28pt">
        </image>
    </pattern>
</defs>
<g>
    <path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#f03" stroke-opacity="0.7" stroke-width="5" fill="url(#rank1)" class="leaflet-clickable" d="M558,85A42,42,0,1,1,557.9,85 z">
    </path>
</g>
<g>
    <path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#0033ff" stroke-opacity="0.5" stroke-width="5" fill="url(#rank1)" class="leaflet-clickable" d="M733 118L849 174L925 108z">
    </path>
</g>

此处的目标是渲染填充图像图案的多边形。使用Chrome的元素检查器，然后我复制了＆amp;粘贴生成的SVG标记并将其粘贴到页面的body元素中。我重新加载页面并得到以下结果：

Link to screen shot（对不起，我目前有10个声誉）

请注意，地图中的多边形没有任何图形填充，但我100％确定它们是相同的标记，因为我只是简单地从Leaflet生成的标记底部复制粘贴多边形。

为什么填充图形不会在地图内的多边形中呈现的任何想法？

Answer 1

几点：

SVG不了解大多数CSS单位。你需要摆脱SVG元素中的“pt”。
您没有关闭SVG元素
对我的图片404的引用

当我解决这些问题并使用工作图片网址时，它可以正常工作。

如何用图像填充Leaflet多边形？

1 个答案: