JS svg基础
吃水不忘挖井人
svg基础教程https://www.bilibili.com/video/BV1Pt411y7V6?p=1
要实现的效果
svg文件的写法：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="300px">
<g style="cursor:pointer">
<circle cx="200" cy="150" r="40" stroke="#1c82f2" stroke-width="2" fill="#1c82f2" />
<text x="100" y="107" font-size="14px" fill="#fff" text-anchor="middle">科鲁兹</text>
</g>
<g style="cursor:pointer">
<line x1="100" y1="100" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
<rect x="140" y="140" rx="4" ry="4" width="20" height="20"
style="fill:#0ff;stroke:black;stroke-width:1"/>
<text x="150" y="157" font-size="14px" fill="black" text-anchor="middle">?</text>
</g>
<g style="cursor:pointer">
<circle cx="200" cy="200" r="40" stroke="black" stroke-width="2" fill="#fff"/>
<text x="200" y="207" font-size="14px" fill="black" text-anchor="middle">2015</text>
</g>
</svg>
js直译
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function function_name () {
var svgNS = "http://www.w3.org/2000/svg";
var oParent = document.getElementById('div1');
var oSvg = document.createElementNS(svgNS,'svg');
oSvg.setAttribute('xmlns',svgNS);
oSvg.setAttribute('width','400px');
oSvg.setAttribute('height','300px');
var oG = document.createElementNS(svgNS,'g');
oG.setAttribute('curosr','pointer');
var oCircle = document.createElementNS(svgNS,'circle');
oCircle.setAttribute('cx','200');
oCircle.setAttribute('cy','150');
oCircle.setAttribute('r','40');
oCircle.setAttribute('fill','#1c82f2');
var oText = document.createElementNS(svgNS,'text');
oText.setAttribute('x','100');
oText.setAttribute('y','100');
oText.setAttribute('font-size','14px');
oText.setAttribute('fill','#fff');
oText.setAttribute('text-anchor','middle');
oText.innerHTML="科鲁兹";
oG.appendChild(oCircle);
oG.appendChild(oText);
oSvg.appendChild(oG);
oParent.appendChild(oSvg);
//省略···
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
使用封装createTag函数
var oParent = document.getElementById('div1');
var svgNS = "http://www.w3.org/2000/svg";
//使用封装createTag函数
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':'400px','height':'300px'});
var oG = createTag('g',{'curosr':'pointer'});
var oCircle = createTag('circle',{'cx':'200','cy':'150','r':'40','stroke':'#1c82f2','stroke-width':'2','fill':'#1c82f2'});
var oText = createTag('text',{'x':'100','y':'100','font-size':'14px','fill':'#fff','text-anchor':'middle'});
oText.innerHTML="科鲁兹";
oG.appendChild(oCircle);
oG.appendChild(oText);
oSvg.appendChild(oG);
oParent.appendChild(oSvg);
分离数据
var oParent = document.getElementById('div1');
var svgNS = "http://www.w3.org/2000/svg";
var centerX = oParent.offsetWidth/2;
var centerY = oParent.offsetHeight/2;
var data = {
centerNode : { text : "科鲁兹"}, //中心点x=centerX,y=centerY
otherNode : [
{x:100,y:100,text:"2015"}
]
};
function createTag (tag, objAttr) {
var oTag = document.createElementNS(svgNS,tag);
for( var attr in objAttr){
oTag.setAttribute(attr,objAttr[attr]);
}
return oTag;
};
function centerNode () {
var oSvg = createTag('svg',{'xmlns':'svgNS','width':'400px','height':'300px'});
var oG = createTag('g',{'curosr':'pointer'});
var oCircle = createTag('circle',{'cx':centerX,'cy':centerY,'r':'40','stroke':'#1c82f2','stroke-width':'2','fill':'#1c82f2'});
var oText = createTag('text',{'x':centerX,'y':centerY+7,'font-size':'14px','fill':'#fff','text-anchor':'middle'});
oText.innerHTML = data.centerNode.text;
oG.appendChild(oCircle);
oG.appendChild(oText);
oSvg.appendChild(oG);
oParent.appendChild(oSvg);
};
function otherNode (data.otherNode[]) {
//连线和其他圆
};
centerNode () ;
for (var i = 0; i < data.otherNode.length; i++) {
otherNode (data.otherNode[i]);
};
