CODEWITHSUNDEEP
htmlsvg
G.Hunt
G.Hunt

Reputation: 1414

Adding a stroke to specific edges on SVG polygon

I'm trying to create a custom map marker shape using SVG (created in JS, but for the sake of simplicity I've used the actual HTML here). In this case, I've simply used a circle and a polygon element together to give the effect of a marker, below:

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

This is all well and good. However, I'd like to have a border around the outside of the shape, but if I try to add a stroke to the triangle, which forms the arrow of the marker, I get the line cutting through the circle, as shown:

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

I know there are probably many ways to achieve this effect, such as using the path tag, but my SVG knowledge isn't up to that level as of yet. Any pointers are appreciated.

Upvotes: 0

Views: 253

Answers (1)

Scheff&#39;s Cat
Scheff&#39;s Cat

Reputation: 20141

<path> was my first idea. But while fiddling with the arc I got an even simpler idea:

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

...using <circle> and polygon twice, and with filling only.

The first set is for the border – hence a little bit larger. The first set is covered by the second set for the actual filling.

Upvotes: 1

Related Questions