最近接到一项需求，点击地图上的要素从点击的要素向文字提示连线，最初要求是直角的折线，直接在文字提示和地图中心画一个div，给div的两条边加边框，div内部透明就实现了，最后领导要求是折线，直角的不好看，最后就想到了用动态生成SVG实现。

效果图下图

实现过程代码如下

//输入点击要素的绝对屏幕坐标
createLine(coord_pixel.x + mapDiv.offset().left, coord_pixel.y + mapDiv.offset().top);
  

  /**
     * 生成折线
     * @param x 行政中心屏幕x坐标
     * @param y 行政中心屏幕y坐标
     */
    function createLine(x, y) {
        //计算文字提示右侧中心坐标
        var target = $("#target");
        var x_target = target.offset().left + target.width();
        var y_target = target.offset().top + target.height() / 2;
        //line为直角线的实现方式

        if (y > y_target) {//起点在文字提示下方
           
            createSvg(x-x_target,y-y_target,y_target,x_target,false);
        } else {//起点在文字提示上方 
            createSvg(x-x_target,y_target-y,y,x_target,true);
        }
    }
 /**
     * 生成svg
     */
    function createSvg(width, height, top,left,isLineBottom) {
        var svg = $("<svg class='polylineSvg' xmlns='http://www.w3.org/2000/svg' version='1.1' width='" +
            width + "px' height='" + height + "px' viewBox='0,0,"+width+","+height+"'></svg>");
        var x,html;//折点svg坐标,折线
        x=width*0.7;
        if (isLineBottom) {//线在底部
            var y=height-1;
            html = "<polyline points='0,"+y+" "+x+","+y+" "+width+",0'" +
                " style='fill:white;stroke:white;stroke-width:1;fill-opacity:0'/>";
            svg.html(html);
        } else {//线在顶部

            html = "<polyline points='0,1 "+x+",1 "+width+","+height+"'" +
                " style='fill:white;stroke:white;stroke-width:1;fill-opacity:0'/>";
            svg.html(html);
        }
        $("body").append(svg);
        svg.css({
            "top":top,
            "left":left
        })
    }