html - Adding a stroke to specific edges on SVG polygon -
i'm trying create custom map marker shape using svg (created in js, sake of simplicity i've used actual html here). in case, i've used circle
, polygon
element give effect of 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 , good. however, i'd have border around outside of shape, if try add stroke triangle, forms arrow of marker, line cutting through circle, 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 many ways achieve effect, such using path
tag, svg knowledge isn't level of yet. pointers appreciated.
<path>
first idea. while fiddling arc got 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>
, polygon
twice, , filling only.
the first set border – hence little bit larger. first set covered second set actual filling.
Comments
Post a Comment