如何使用SVG JS绘制谷歌地图上的pin标记？

Question

I am using HTML5 Interactive map and i have only one shape for my map pin which is circle,is it possible to make something like google map pin marker by set additional attributes to my circle code:

var points_len = wmConfig['points'].length;
if( points_len > 0){
    var xmlns = "http://www.w3.org/2000/svg";
    var tsvg_obj = document.getElementById("map_points");
    var svg_circle,svg_rect,svg_image;
    for(var i=0;i<points_len;i++){
        if (wmConfig['points'][i]['shape']=="circle"){
            svg_circle = document.createElementNS(xmlns, "circle");
            svg_circle.setAttributeNS(null, "cx", wmConfig['points'][i]['pos_X']);
            svg_circle.setAttributeNS(null, "cy", wmConfig['points'][i]['pos_Y']);
            svg_circle.setAttributeNS(null, "r", wmConfig['points'][i]['diameter']/2);
            svg_circle.setAttributeNS(null, "fill", wmConfig['points'][i]['upcolor']);
            svg_circle.setAttributeNS(null, "stroke",wmConfig['points'][i]['outline']);
            svg_circle.setAttributeNS(null, "stroke-width",wmConfig['points'][i]['thickness']);
            svg_circle.setAttributeNS(null, "id",'map_points_'+i);
            svg_circle.setAttributeNS(null, "data-smallipop-referenced-content",'#map_data_'+i);
            svg_circle.setAttributeNS(null, "title",wmConfig['points'][i]['hover']);
            tsvg_obj.appendChild(svg_circle);
            dynamicAddEvent(i);
        }

Answer 1

You'd better use path instead of circle . It's more powerful. See [here]) https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths ).

---

I'm not an artist, but here is what you can achieve: http://jsfiddle.net/Lv6s19se/2/

<svg width="64" height="64" viewBox="-16 -18 64 64">
    <path fill="rgba(0,0,0,.2)" stroke="none"
        transform="translate(-2,48) scale(1,0.5) rotate(40) translate(0,-46)"
        d="M0,47 Q0,28 10,15 A15,15 0,1,0 -10,15 Q0,28 0,47"/>
    <path fill="#d53" stroke="black" stroke-width="1"
        d="M0,47 Q0,28 10,15 A15,15 0,1,0 -10,15 Q0,28 0,47"/>
    <circle cx="0" cy="4" r="4" fill="black" stroke="none"/>
</svg>