SVG案例：动态去创建元素createElementNS

案例一：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
    background:#000;
}
#demo1{
    width:780px;
    height:400px;
    background:url(images/bg.jpg) no-repeat;
    margin:20px auto;
    overflow:hidden;
}
 
</style>
<script type="text/javascript">
/*
    中心点
    x : 780/2 = 390
    y : 400/2 = 200 
 */
//一条线的中心坐标 x :（100+390）/2 = 245
//                 y : (100+200) /2 = 150    
</script>
</head>
<body>
<div id="demo1">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <g style="cursor:pointer">
            <line x1="100" y1="100" x2="390" y2="200" stroke="#eee"></line> 
            <!--为解决用户鼠标经过 线 出现手势光标效果 需要复制一份线-->
            <line x1="100" y1="100" x2="390" y2="200" stroke="transparent" stroke-width="10"></line> 
            <!--rect 居中方法：默认起点是左上角, y=y-width/2; x=x-height/2 -->
            <rect x="235" y="140" width="20" height="20" fill="#999" rx="4" ></rect>
            <!-- text 文字居中方法：y=y+字体的大小/2 x=x+字体大小/2 -->
            <text x="245" y="158" font-size="16" fill="white" text-anchor="middle">?</text>
        </g>
        <g style="cursor:pointer">
            <circle cx="100" cy="100" r="30" stroke="red" stroke-width="3" fill="white"></circle>
            <text x="100" y="108" font-size="16" text-anchor="middle">凤凰网</text>
        </g>
        <g style="cursor:pointer">
            <circle cx="390" cy="200" r="40" stroke="red" stroke-width="3" fill="white"></circle>
            <text x="390" y="210" font-size="20" text-anchor="middle" font-family="黑体">NBA</text>
        </g>
    </svg>
</div>
</body>
</html>

案例二：

动态去创建

创建元素
1、createElementNS
-两个参数
-命名空间，标签名
2、封装createTag函数
3、分离数据

Demo1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
    background:#000;
}
#demo1{
    width:780px;
    height:400px;
    background:url(images/bg.jpg) no-repeat;
    margin:20px auto;
    overflow:hidden;
}
 
</style>
<script type="text/javascript">
    /*
        创建元素
        1、createElementNS
         -两个参数
         -命名空间，标签名
        2、封装createTag函数
        3、分离数据
     */ 
window.onload = function (){
    //普通创建元素
    //document.createElement('div');
    
    //SVG 创建元素
    //document.createElementNS(s,t), 包含2个参数,s->命名空间；t->标签元素
    var svgNS = 'http://www.w3.org/2000/svg'; //命名空间
    var oSvg = document.createElementNS(svgNS,'svg'); //创建了一个svg元素
    var oDemo1 = document.getElementById('demo1');
 
    oSvg.setAttribute('xmlns',svgNS);
    oSvg.setAttribute('width','100%');
    oSvg.setAttribute('height','100%');
    oDemo1.appendChild(oSvg);
}
</script>
</head>
<body>
<div id="demo1"></div>
</body>
</html>

Demo2:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
    background:#000;
}
#demo1{
    width:780px;
    height:400px;
    background:url(images/bg.jpg) no-repeat;
    margin:20px auto;
    overflow:hidden;
}
 
</style>
<script type="text/javascript">
window.onload = function (){
    var svgNS = 'http://www.w3.org/2000/svg';
    var oDemo1 = document.getElementById('demo1');
 
    function createTag(tag,objAttr){
        var oTag = document.createElementNS(svgNS,tag);
        for(var attr in objAttr){
            oTag.setAttribute(attr,objAttr[attr]);
        }
        return oTag;
    }
 
    var oSvg = createTag('svg',{'xmlns':svgNS,'width':'100%','height':'100%'});
    var oG = createTag('g',{'style':'cursor:pointer'});
    var oLine1 = createTag('line',{'x1':'100','y1':'100','x2':'390','y2':'200','stroke':'#eee'})
    var oLine2 = createTag('line',{'x1':'100','y1':'100','x2':'390','y2':'200','stroke':'transparent','stroke-width':'10'});
    var oRect = createTag('rect',{'x':'235','y':'140','fill':'#999','width':'20','height':'20','rx':'4'});
    var oText = createTag('text',{'x':'245','y':'158','fill':'white','font-size':'20','text-anchor':'middle'})
    oText.innerHTML = '?';
    oG.appendChild(oLine1);
    oG.appendChild(oLine2);
    oG.appendChild(oRect);
    oG.appendChild(oText);
 
    oSvg.appendChild(oG);
    oDemo1.appendChild(oSvg);
}
</script>
</head>
<body>
<div id="demo1">
</div>
</body>
</html>

扫描二维码关注公众号，回复： 9800880 查看本文章

Demo3:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>svg</title>
<style>
#demo1{ width:780px; height:400px; background:url(images/bg.jpg) no-repeat; margin:20px auto; overflow:hidden;}
body{ background:black;}
</style>
<script>
//780/2  ->   x : 390
//400/2  ->   y : 200
 
//(100 + 390)/2   ->  中心点x : 245
//(100 + 200)/2   ->  中心点y : 150
 
window.onload = function(){    
    var svgNS = 'http://www.w3.org/2000/svg';
    var oParent = document.getElementById('demo1');
    var centerX = oParent.offsetWidth/2;
    var centerY = oParent.offsetHeight/2;
    
    var data = {
        centerNode : { text : 'NBA' },
        otherNode : [
            { x : 100 , y : 100 , text : '凤凰网' },
            { x : 200 , y : 50 , text : '新浪网' },
            { x : 600 , y : 250 , text : '搜狐网' }
        ]
    };
    
    function createTag(tag,objAttr){    
        var oTag = document.createElementNS(svgNS , tag);    
        for(var attr in objAttr){
            oTag.setAttribute(attr , objAttr[attr]);
        }    
        return oTag;    
    }
    
    function addTag(){
        var oSvg = createTag('svg',{'xmlns':svgNS,'width':'100%','height':'100%'});
        for(var i=0;i<data.otherNode.length;i++){
            addOtherTag( data.otherNode[i] , oSvg );
        }
        var oG = createTag('g',{'style':'cursor:pointer'});
        var oCircle = createTag('circle',{'cx':centerX,'cy':centerY,'r':'60','fill':'white','stroke':'red','stroke-width':'1'});
        var oText = createTag('text',{'x':centerX,'y':centerY+8,'font-size':'20','text-anchor':'middle'});
        oText.innerHTML = data.centerNode.text;
        
        oG.appendChild(oCircle);
        oG.appendChild(oText);
        
        oSvg.appendChild(oG);
        oParent.appendChild(oSvg);
    }
    
    addTag();
    
    function addOtherTag(otherAttr , oSvg){        
        var oG = createTag('g',{'style':'cursor:pointer'});
        var oLine1 = createTag('line',{'x1':otherAttr.x,'y1':otherAttr.y,'x2':centerX,'y2':centerY,'stroke':'#ccc'});
        var oLine2 = createTag('line',{'x1':otherAttr.x,'y1':otherAttr.y,'x2':centerX,'y2':centerY,'stroke':'transparent','stroke-width':'10'});
        var oRect = createTag('rect',{'x': (otherAttr.x + centerX)/2 - 10 ,'y': (otherAttr.y + centerY)/2 - 10 ,'fill':'#999','width':'20','height':'20','rx':'5'});
        var oText = createTag('text',{'x':(otherAttr.x + centerX)/2,'y':(otherAttr.y + centerY)/2 + 8,'fill':'white','font-size':'20','text-anchor':'middle'});
        oText.innerHTML = '?';
        
        oG.appendChild(oLine1);
        oG.appendChild(oLine2);
        oG.appendChild(oRect);
        oG.appendChild(oText);
        
        oSvg.appendChild(oG);
                
        var oG = createTag('g',{'style':'cursor:pointer'});
        var oCircle = createTag('circle',{'cx':otherAttr.x,'cy':otherAttr.y,'r':'40','fill':'white','stroke':'red','stroke-width':'1'});
        var oText = createTag('text',{'x':otherAttr.x,'y':otherAttr.y+8,'font-size':'20','text-anchor':'middle'});
        oText.innerHTML = otherAttr.text;
        
        oG.appendChild(oCircle);
        oG.appendChild(oText);
        
        oSvg.appendChild(oG);    
    }    
};
 
</script>
</head>
 
<body>
<div id="demo1"></div>
</body>
</html>

SVG案例：动态去创建元素createElementNS

猜你喜欢