在传单/SVG多边形上绘制答案

【问题标题】：Draw on leaflet/svg polygon在传单/SVG多边形上绘制
【发布时间】：2018-01-18 16:18:47
【问题描述】：

我目前正在使用传单中的地图，其中包含大约 100 个多边形。我的问题是我需要使用确定多边形中每个点的颜色的算法在多边形上绘制（或替换它们）；目前是一种孤立的逆距离加权算法 (IDW)，用于在多边形内生成孤立的热图。

为了说明，请考虑绘制如下内容：

https://cdn.dribbble.com/users/1376/screenshots/81962/shot_1290433321.png

--在多边形内。

现在，你会怎么做？

请注意，一旦将一个多边形添加到传单中，就会生成一个类似于以下的 svg：

<g>

  <path class="leaflet-interactive" 
    stroke="#3388ff" 
    stroke-opacity="1" 
    stroke-width="3" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    fill="#3388ff" 
    fill-opacity="0.2" 
    fill-rule="evenodd" 
    d="M515 304L515 347L160 684L160 304z">
  </path>

  <path class="leaflet-interactive" 
    stroke="#3388ff" 
    stroke-opacity="1" 
    stroke-width="3" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    fill="#3388ff" 
    fill-opacity="0.2" 
    fill-rule="evenodd" 
    d="M515 304L515 347L160 684L160 304z">
</path>

</g>

【问题讨论】：

标签： html canvas svg leaflet gradient

【解决方案1】：

我认为最好的解决方案是为地图创建一个 svg <g> 元素。将您的 svg 多边形元素放入组中。然后直接在这些标准的 svg 多边形元素上施展你的魔法。要创建这个 svg <g> 使用：L.svg().addTo(map);

RE：我仍然完全不知道如何在其中一条路径中实际“绘制”

使用多边形（或路径）点创建一个 svg clipPath 元素。然后在要剪辑的图像上包含剪辑路径属性

【讨论】：

谢谢！但是，我仍然完全不知道如何在其中一条路径内实际“绘制”（即用不超出路径的复杂图案替换多边形的填充）
再次感谢，这就是我最终所做的。 :)