svg 使用例子

来源：互联网发布：点击精灵淘宝版编辑：程序博客网时间：2024/05/23 19:48
svg 使用例子

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1{ width:780px; height:400px; background:url(img/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 : 150window.onload = function(){var svgNS = 'http://www.w3.org/2000/svg';var oParent = document.getElementById('div1');var centerX = oParent.offsetWidth/2;var centerY = oParent.offsetHeight/2;var circleNum = 9;var angleNum = 390/circleNum;var centerR = 150;var otherData = [];for(var i=0;i<circleNum;i++){var y = Math.sin(i*40*Math.PI/180)*centerR + centerY;var x = Math.cos(i*40*Math.PI/180)*centerR + centerX;otherData.push({x : x , y : y , text : i});}var data = {centerNode : { text : '科鲁兹' },otherNode : otherData};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':'40','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','class':'lineStyle'});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','class':'circleStyle'});var oCircle = createTag('circle',{'cx':otherAttr.x,'cy':otherAttr.y,'r':'30','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);}bindTag();function bindTag(){var aLine = document.getElementsByClassName('lineStyle');var aCircle = document.getElementsByClassName('circleStyle');for(var i=0;i<aCircle.length;i++){aCircle[i].onmouseenter = function(){startMove( this.getElementsByTagName('circle')[0] , 30 , 40 );var prevLine = this.previousElementSibling;prevLine.getElementsByTagName('line')[0].setAttribute('stroke','blue');prevLine.getElementsByTagName('rect')[0].setAttribute('fill','red');};aCircle[i].onmouseleave = function(){startMove( this.getElementsByTagName('circle')[0] , 40 , 30 );var prevLine = this.previousElementSibling;prevLine.getElementsByTagName('line')[0].setAttribute('stroke','#ccc');prevLine.getElementsByTagName('rect')[0].setAttribute('fill','#999');};}for(var i=0;i<aLine.length;i++){aLine[i].onmouseenter = function(){this.getElementsByTagName('line')[0].setAttribute('stroke','blue');this.getElementsByTagName('rect')[0].setAttribute('fill','red');var prevCircle = this.nextElementSibling;startMove( prevCircle.getElementsByTagName('circle')[0] , 30 , 40 );};aLine[i].onmouseleave = function(){this.getElementsByTagName('line')[0].setAttribute('stroke','#ccc');this.getElementsByTagName('rect')[0].setAttribute('fill','#999');var prevCircle = this.nextElementSibling;startMove( prevCircle.getElementsByTagName('circle')[0] , 40 , 30 );};}}function startMove(obj,r1,r2){var nowR = r1;var overR = r2;obj.speed = 0;clearInterval(obj.timer);obj.timer = setInterval(function(){obj.speed += (overR - nowR)/6;obj.speed *= 0.9;if( Math.abs(overR - nowR)<=1 && Math.abs(obj.speed)<=1 ){clearInterval(obj.timer);obj.setAttribute( 'r' , overR );}else{nowR += obj.speed;obj.setAttribute( 'r' , nowR );}},30);}};</script></head><body><div id="div1"><!--<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="#ccc"></line>            <line x1="100" y1="100" x2="390" y2="200" stroke="transparent" stroke-width="10"></line>            <rect x="235" y="140" fill="#999" width="20" height="20" rx="5"></rect>            <text x="245" y="158" fill="white" font-size="20" text-anchor="middle">?</text>        </g>        <g style="cursor:pointer">        <circle cx="100" cy="100" r="40" fill="white" stroke="red" stroke-width="3"></circle>            <text x="100" y="108" font-size="20" text-anchor="middle">易车网</text>        </g>        <g style="cursor:pointer">        <circle cx="390" cy="200" r="60" fill="white" stroke="red" stroke-width="3"></circle>            <text x="390" y="208" font-size="20" text-anchor="middle">科鲁兹</text>        </g>    </svg>--></div></body></html>
阅读全文
0 0