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

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -