我正在尝试使用SVG创建自定义地图标记形状(在JS中创建，但为了简单起见，我在这里使用了实际的HTML(。 在本例中，我只是简单地同时使用了一个circle和一个polygon元素来提供标记的效果，如下所示：
<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30">
<circle cx="15" cy="13" r="10" fill="#abcdef" />
<polygon points="5,15 25,15 15,30" fill="#abcdef" />
</svg>这一切都很好。但是，我想在形状的外部周围有一个边框，但是如果我尝试向三角形添加笔触，形成标记的箭头，我会得到穿过圆的线，如下所示：
<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30">
<circle cx="15" cy="13" r="10" fill="#abcdef" stroke="#595959" stroke-width="1" />
<polygon points="5,15 25,15 15,30" fill="#abcdef" stroke="#595959" stroke-width="1" />
</svg>我知道可能有很多方法可以实现这种效果，例如使用path标签，但我的 SVG 知识还没有达到这个水平。任何指示都值得赞赏。
<path>是我的第一个想法。但是在摆弄弧线时，我得到了一个更简单的想法：
<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30">
<circle cx="15" cy="13" r="11" fill="#595959" stroke="none"/>
<polygon points="5,16 25,16 15,30" fill="#595959" stroke="none"/>
<circle cx="15" cy="13" r="10" fill="#abcdef" stroke="none" />
<polygon points="6,15 24,15 15,28" fill="#abcdef" stroke="none"/>
</svg>。使用<circle>和polygon两次，并且仅使用填充物。
第一组用于边界 - 因此有点大。 第一组由第二组覆盖，用于实际填充。