svg入门

最近一个项目需要画一个流程图。。做了个demo链接

很简单,就是一些框框和圆圈啊,方块啥的。。刚开始本来是考虑框架。。发现如果只是做chrome的话,不需要那么麻烦。。

然后就手写了几个svg的东西。。算是入门了 代码如下

var mySVG = mySVG||{};
mySVG.DOM = document;
mySVG.xmlns = "http://www.w3.org/2000/svg";
mySVG.SVG = function(id,width,height){
    mySVG.svgBox = mySVG.DOM.getElementById(id);
    var svg = mySVG.DOM.createElementNS(mySVG.xmlns,"svg");
    svg.setAttribute("xmlns",mySVG.xmlns);
    svg.setAttribute("version","1.1");
    svg.style.cssText="position:relative;width:"+width+"px;height:"+height+"px;";
    mySVG.svgBox.appendChild(svg);
    mySVG.ctrlRect();
    return svg;
}
mySVG.ctrlRect=function(){
    $("body").bind("click",function(e){
        var i = e.target.getAttribute("i");
        if(i==="c"){
            var ele = $(e.target).parent();
        }else if(i==="p"){
            var ele = $(e.target);
        }else{
            return;
        }
        var isShow  = ele.attr("isshow");
        var g = $("#"+ele.attr("g"));
        var c = $("#"+ele.attr("c"));
        if(isShow==1){
            ele.attr("isshow",0);
            //隐藏对应的节点元素
            g.hide("normal");
            c.hide("normal");
        }else{
            ele.attr("isshow",1);
            //显示对应的节点元素
            g.show("normal");
            c.show("normal");
        }
    });
}
mySVG.createEle=function(svgObj,type,attr){
    var e = mySVG.DOM.createElementNS(mySVG.xmlns,type);
    if(attr){
        mySVG.setAttr(e,attr);
    }
    svgObj.appendChild(e);
    return e;
}
mySVG.setAttr=function(ele,param){
    if(param){
        for(var attr in param){
            ele.setAttribute(attr,param[attr]);
        }
    }
    return ele;
}
mySVG.rect=function(svgObj,attr){
    return mySVG.createEle(svgObj,"rect",attr);
}
mySVG.circle = function(svgObj,attr){
    return mySVG.createEle(svgObj,"circle",attr);
}
mySVG.line=function(svgObj,attr){
    return mySVG.createEle(svgObj,"line",attr);
}
mySVG.text=function(svgObj,attr,text){
    var t = mySVG.createEle(svgObj,"text",attr);
    t.innerhtml=text||"";
    return t;
}
mySVG.group=function(svgObj,attr){
    return mySVG.createEle(svgObj,"g",attr);
}

详细的js点击这里查看,时间很紧写得很简陋,纯作为记录。。

本文标题:svg入门
本文链接:https://56way.com/p/24.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。