SVGポリゴンの特定の辺にストロークを追加する

Question

SVGを使用してカスタムマップマーカーシェイプを作成しようとしています（JSで作成されましたが、ここでは実際のHTMLを使いました）。これはすべてが順調と良いです

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

： はこの場合、私は単に下に、マーカーの効果を与えるために一緒にcircleとpolygon要素を使用しました。しかし、図形の外側に境界線を付けたいと思っていますが、マーカーの矢印を構成する三角形にストロークを追加しようとすると、図のように円を切り取ってしまいます。

<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の知識はまだのようにそのレベルまでではありません。任意のポインタが評価されます。

Answer 1

<path>が私の最初のアイデアでした。だけ記入して、二回<circle>とpolygonを使用して...

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

：しかし、弧をいじっている間、私はさらに簡単なアイデアを得ました。

最初のセットは、境界–のため、少し大きいです。 最初のセットは、実際の充填のために2番目のセットでカバーされています。