<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{ 780px;height: 370px;background: white; background: url(./bakground.jpeg) no-repeat;margin:20px auto; overflow: hidden;}
body{background: gray;}
</style>
</head>
<body>
<div id="div1">
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" > -->
<!-- <circle cx="100" cy="100" r="40" fill = "transparent" stroke="black" stroke-width="5"></circle> -->
<!-- <circle cx="100" cy="100" r="40" style="fill:transparent;stroke:black; stroke-5;" ></circle> -->
<!-- <rect width="200" height="200" x="100" y="100" fill="100" fill="red" rx="30"></rect> -->
<!-- <line x1="50" y1="50" x2="200" y2="200" stroke="black" stroke-width="5" stroke-opacity="0.5"></line> -->
<!-- 分组 -->
<!-- <g id = "g1" transform="translate(200,200)" stroke-width="5" stroke = "red">
<circle r="40" fill="transparent"></circle>
<circle r="30" fill="transparent"></circle>
<circle r="20" fill="transparent"></circle>
<circle r="10" fill="transparent"></circle>
</g> -->
<!-- 加文字 -->
<!-- <g style="cursor:pointer">
<circle cx="200" cy="200" r="50" fill="transparent" stroke="red" stroke-width="5" ></circle>
<text x="200" y="208" font-size ="20" text-anchor="middle" >BMW</text>
</g> -->
<!-- 加背景图 -->
<!-- <g style="cursor:pointer">
<image x="150" y="149" width="100" height="103" xlink:href="./1.png"></image>
<text x="200" y="208" font-size ="20" text-anchor="middle" >BMW</text>
</g> -->
<!-- 两圆连线 -->
<!-- <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" >Audi</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" >Benzi</text>
</g> -->
<!-- </svg> -->
</div>
</body>
</html>
<script>
window.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 = 360/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:'BMW'},
otherNode: otherData
};
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);
}
/* var oSvg = document.createElementNS(svgNS,'svg');
oSvg.setAttribute('xmlns',svgNS);
oSvg.setAttribute('width','100%');
oSvg.setAttribute('height','100%');
oParent.appendChild(oSvg); */
/* 封装一个创建标签的函数 */
function createTag(tag,objAttr)
{
var oTag = document.createElementNS(svgNS,tag);
for(var attr in objAttr)
{
oTag.setAttribute(attr,objAttr[attr]);
}
return oTag;
}
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 nextCircle = this.nextElementSibling;
startMove(nextCircle.getElementsByTagName('circle')[0],30,40);
};
aLine[i].onmouseleave = function()
{
this.getElementsByTagName('line')[0].setAttribute('stroke','#ccc');
this.getElementsByTagName('rect')[0].setAttribute('fill','#999');
var nextCircle = this.nextElementSibling;
startMove(nextCircle.getElementsByTagName('circle')[0],40,30);
}
}
}
bindTag();
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.8;
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);
}
})
}
/* 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':'#ccc'});
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':'5'});
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);
oParent.appendChild(oSvg); */
}
</script>
