向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多邊形上的特定邊添加描邊

回答

相關問題