Question

我尝试使用SVG创建自定义地图标记形状（在JS中创建，但为了简单起见，我在这里使用了实际的HTML）。在这种情况下，我只是简单地使用circle和polygon元素来表示标记的效果，如下所示：

＆＃13;

<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>

＆＃13;

这一切都很好。但是，我想在形状的外面有一个边框，但是如果我尝试在形成标记箭头的三角形上添加一个笔划，我会让线条穿过圆圈，如图所示：

＆＃13;

<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>

＆＃13;

我知道可能有很多方法可以达到这种效果，例如使用path标记，但我的SVG知识尚未达到该级别。任何指针都表示赞赏。

Answer 1

<path>是我的第一个想法。但是在摆弄弧线时我得到了一个更简单的想法：

＆＃13;

<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>

＆＃13;

...两次使用<circle>和polygon，仅填充。

第一组用于边框 - 因此稍微大一些。第一组用于实际填充的第二组。

在SVG多边形的特定边上添加笔划

1 个答案: