向SVG多边形上的特定边添加描边

我正尝试使用SVG创建自定义地图标记形状（在JS中创建，但为了简单起见，我在此使用了实际的HTML）。在这种情况下，我只是用一个circle和polygon元素共同为用户提供标记的效果，如下所示：向SVG多边形上的特定边添加描边

<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知识是达不到那个水平呢。任何指针赞赏。

来源

2017-08-15 G.Hunt

@Sirko，请阅读问题中的最后一句话。 –

将您的SVG知识提升到您可以使用路径标记的程度。或者使用诸如inkscape之类的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两次，且仅填充。第一组是–，因此有点大一点。第一组由实际填充物覆盖。

来源

2017-08-15 13:29:35 Scheff

好主意，没想到要复制这些形状。 –

向SVG多边形上的特定边添加描边

回答

相关问题