svg 例子

来源：互联网发布：贪心算法的基本要素编辑：程序博客网时间：2024/05/12 07:34
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1{ width:400px; height:400px; background:white;}body{ background:black;}</style><script>window.onload = function(){var svgNS = 'http://www.w3.org/2000/svg';var oParent = document.getElementById('div1');var oSvg = document.getElementById('svg1');function createTag(tag,objAttr){var oTag = document.createElementNS(svgNS , tag);for(var attr in objAttr){oTag.setAttribute(attr , objAttr[attr]);}return oTag;}//var arrNum = [15,30,40,15];var arrNum = [23.61,17.10,16.05,15.40,11.72,14.95];var angle = 360;var sumNum = 0;var outerR = 120;var innerR = 70;var centerX = 200;var centerY = 200;var outerXY = [{x : 320 , y : 200}];var innerXY = [{x : 270 , y : 200}];var arrColor = ['red','blue','yellow','green','black','gray'];for(var i=0;i<arrNum.length;i++){var agNum = arrNum[i]/100 * angle;sumNum += agNum;if(i == arrNum.length-1){sumNum = 360;}var outerX = Math.cos( sumNum * Math.PI/180 ) * outerR + centerX;var outerY = Math.sin( sumNum * Math.PI/180 ) * outerR + centerY;outerXY.push({x : outerX , y : outerY});var innerX = Math.cos( sumNum * Math.PI/180 ) * innerR + centerX;var innerY = Math.sin( sumNum * Math.PI/180 ) * innerR + centerY;innerXY.push({x : innerX , y : innerY});}//console.log( outerXY );//console.log( innerXY );for(var i=0;i<outerXY.length;i++){if(i == outerXY.length-1){break;}var oPath = createTag('path',{fill : arrColor[i] , d : 'M'+outerXY[i].x+' '+outerXY[i].y+'A'+outerR+' '+outerR+' 0 0 1 '+outerXY[i+1].x+' '+outerXY[i+1].y+'L'+innerXY[i+1].x+' '+innerXY[i+1].y+'A'+innerR+' '+innerR+' 0 0 0 '+innerXY[i].x+' '+innerXY[i].y});var oAn = createTag('animate',{attributeName : 'd' , dur : '0.5' , from : 'M'+outerXY[i].x+' '+outerXY[i].y+'A'+outerR+' '+outerR+' 0 0 1 '+outerXY[i].x+' '+outerXY[i].y+'L'+innerXY[i+1].x+' '+innerXY[i].y+'A'+innerR+' '+innerR+' 0 0 0 '+innerXY[i].x+' '+innerXY[i].y,to:'M'+outerXY[i].x+' '+outerXY[i].y+'A'+outerR+' '+outerR+' 0 0 1 '+outerXY[i+1].x+' '+outerXY[i+1].y+'L'+innerXY[i+1].x+' '+innerXY[i+1].y+'A'+innerR+' '+innerR+' 0 0 0 '+innerXY[i].x+' '+innerXY[i].y});oPath.appendChild(oAn);oSvg.appendChild(oPath);}};</script></head><body><div id="div1"><svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">       <!--<path d="M50 100L200 200L100 100ZM300 100L300 300" stroke="black" stroke-width="5" fill="none"></path>-->       <!--<path d="M50 100H200V200" stroke="black" stroke-width="5" fill="none"></path>-->       <!--<path d="M50 100h200v200" stroke="black" stroke-width="5" fill="none"></path>-->       <!--<path d="M100 100A150 100 50 1 1 200 200" stroke="black" stroke-width="5" fill="none"></path>-->       <!--<path d="M150 150A100 100 0 0 1 250 150L225 175A50 50 0 0 0 175 175Z" stroke="black" stroke-width="5" fill="none"></path>-->    </svg></div></body></html>
阅读全文
0 0