Javascript 如何使用SVG JS绘制像google地图上那样的pin标记？

我使用的是

HTML5交互式地图

，我的地图pin只有一个形状，那就是圆形，是否可以通过为我的圆形代码设置其他属性来制作类似

谷歌地图pin标记

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);
        }

var points\u len=wmConfig['points'].length；
如果（点长度>0）{
var xmlns=”http://www.w3.org/2000/svg";
var tsvg_obj=document.getElementById（“映射点”）；
var svg_圆圈、svg_矩形、svg_图像；
对于（var i=0；i您最好使用
path
而不是
circle
。它更强大。
见[此处]）


我不是艺术家，但以下是你可以实现的：

我正在尝试绘制类似谷歌地图上的pin标记，如何使用
path
解决这个问题？
<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>