2

我尝试修改 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 的元素检查器复制并粘贴了生成的 SVG 标记并将其粘贴到页面的正文元素中。我重新加载页面并得到以下结果：

链接到屏幕截图（抱歉，我目前的声望 < 10）

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

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

4

1 回答 1

1

几点：

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

当我解决这些问题并使用有效的图像 URL 时，它可以正常工作。

于 2016-11-19T17:27:17.490 回答