SVG 案例一

最新推荐文章于 2022-08-11 08:40:30 发布

Mr_lwb

最新推荐文章于 2022-08-11 08:40:30 发布

阅读量602

点赞数 1

分类专栏： Html5 文章标签： svg

本文链接：https://blog.csdn.net/u010881899/article/details/60604045

版权

Html5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

案例一：

<!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>

效果图二：

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>

效果图三：