SVG使用记录

    <g>标签用于将多个形状组成一个组（group），方便复用。
    <defs>标签用于自定义形状，它内部的代码不会显示，仅供引用。
    
    
    
    view0=SVG.select('.svg-pan-zoom_viewport').get(0);
    view0.circle(0.2,0.2).center(43.4821315267019,79.8926890514464).stroke({color:"#FF0000"});
    view0.circle(0.2,0.2).center(44.4821315267019,80.8926890514464);
        
        
    svgElement = document.querySelector('svg');
    svgPoint = svgElement.createSVGPoint();
    svgImg(cursorPoint(p1));
    function cursorPoint(p1) {
        debugger;
        svgPoint.x = p1.x;
        svgPoint.y = p1.y;
        return svgPoint.matrixTransform(svgElement.getScreenCTM().inverse());
    }

    function svgImg(svgCoords){
        var tsvg_obj = document.getElementById("limit-svg");
        var xmlns = "http://www.w3.org/2000/svg";
        var svgImg = document.createElementNS(xmlns,"image");
        svgImg.setAttributeNS(null,"x",svgCoords.x);
        svgImg.setAttributeNS(null,"y",svgCoords.y);
        svgImg.setAttributeNS(null,"width",'20px');
        svgImg.setAttributeNS(null,"height",'30px');
        svgImg.setAttribute("style","fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)");
        svgImg.href.baseVal = "${pageContext.request.contextPath}/resources/plugins/svg/img/man1.png";
        tsvg_obj.appendChild(svgImg);
    }
    
    $(document).ready(function(){
        var panZoomTiger = svgPanZoom('#limit-svg', {
            zoomEnabled: true,
            controlIconsEnabled: false,
            fit: false,
            center: true
        });
        
        svgdoc=SVG("limit-svg");
        view0=SVG.select('.svg-pan-zoom_viewport').get(0);
        view0.circle(0.2,0.2).center(43.4821315267019,79.8926890514464).stroke({color:"#FF0000"});
        var ele=$('#g4604');
        console.log(ele);
        ele.width(100);
        ele.css("fill","#ff0000");
        
        
        svgdoc.on("mousemove",function (e) {
            if (view){
                var p1 = view.point(e.clientX, e.clientY);
                console.log("当前座标：X="+p1.x + ",Y=" + p1.y);
            }
        });

    });
    
    SVG 不居中
    
    
    
    var svgman=SVG.get('svgman');
//            var m1 =svgman.clone();
//            m1.fill({color:"#ff0000"}).width(1).height(2).center(44.4821315267019,80.8926890514464);
//            view0.use(m1);
//
//            var m2 =svgman.clone();
//            m2.fill({color:"#00ff00"}).width(1).height(2).center(20,10);
//            view0.use(m2);
//
//            var m3 =svgman.clone();
//            m3.fill({color:"#0000ff"}).width(1).height(2).center(30,10);
//            view0.use(m3);
//
//
//            var kzz=SVG.get('svgkzz');
//
//            var kzz1 =kzz.clone();
//            kzz1.fill({color:"#ff0000"}).width(4).height(4).center(44.4821315267019,80.8926890514464);
//            view0.use(kzz1);

*
    新的svg需要添加style
    id修改
    
    
    view.path("M0,0 L0,10 L13,5 z").fill({color:"#584B92"}).attr('transform', 'rotate(-12 '+jhjdX+' '+ jhjdY+')').center(jhjdX-5, jhjdY);
    
    view.path("M0,0 L0,10 L13,5 z").rotate(-12, jhjdX, jhjdY).fill({color:"#584B92"}).center(jhjdX-5, jhjdY);
    
    view.text("Δ"+ygaqJl+"m").fill({color: "#F80000"}).style({"font-size": "14px"}).dx(textYgX).dy(baseY-55);
    
    view.line([[baseX, sjjdY], [sjjdX, sjjdY]]).fill('none').stroke({ width: 1.5, color: "#9b9b9b" });
    
    view.polyline([[baseX, baseY], [baseX, yZb]]).fill('none').stroke({ width: 1.5, color: "#9b9b9b" });
    
    view.rect(sdjdKwWidth, 24).move(zzmX, baseY-73).fill({color: "lightblue"}).stroke({ width:0.05});
    
    view.path("M0,0 L0,10 L13,5 z").fill({color:"#d44c42"}).center(sjjdX+5, sjjdY);
    
    
    var kzz=SVG.get('svgkzz');
    var man = view0.use(kzz.clone().fill({color:"#ff0000"}).width(4).height(4).center(item.kzdX+1, item.kzdY+1));
    man.click(function(e){svgmanclick(this.data('empDwkh').emp_dwkh);});
    
    
// view.text(item.zhwb).dx(zhX).dy(baseY).style({"font-size": "12px"}).attr('transform', 'rotate(90,10,20)');

// view.text(item.zhwb).dx(zhX-20).dy(baseY).style({"font-size": "12px"}).attr('startOffset', '50%').font({"writing-mode": " tb-rl"});//writing-mode文字垂直显示