SVG学习——6.实现圆与中心圆连接_HTML

跟着视频做的，对方数据是车子。我随便改了一下，要贴合最近的心情。
效果图如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
<head>
<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>

<!--svg中创建标签的方法-->
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 data={
    centerNode: {text:'心情如何'},
    otherNode: [
      { x:100, y:100 , text:'不开心'},
      { x:200, y:50 , text:'一般般'},
      { x:600, y:150 , text:'糟透了'},
      { x:650, y:300 , text:'垂头丧气'},
    ]
  };

  function createTag(tag, objAttr){       //封装一个创建标签的函数 这里取名为createTag
      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
     oG.appendChild(oText);  //添加到oG
     oSvg.appendChild(oG);  //添加到oSvg
     oParent.appendChild(oSvg);  //添加到oParent
  }
  //调用一下
  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':(centerX+otherAttr.x)/2-10, 'y':(centerY+otherAttr.y)/2-10, 'fill':'#999', 'width':'20', 'height':'20', 'rx':'5'});
    var oText=createTag('text', {'x':(centerX+otherAttr.x)/2, 'y':(centerY+otherAttr.y)/2+8, 'fill':'white', 'font-size':'20', 'text-anchor':'middle' });
    oText.innerHTML='?';  //添加文字

    oG.appendChild(oLine1);  //添加到oG
    oG.appendChild(oLine2);  //添加到oG
    oG.appendChild(oRect);  //添加到oG
    oG.appendChild(oText);  //添加到oG
    oSvg.appendChild(oG);  //oG添加到oSvg
  
   //创建圆 
    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; //文字是传过来的otherAttr的text

    oG.appendChild(oCircle);  //添加到oG
    oG.appendChild(oText);  //添加到oG
    oSvg.appendChild(oG);  //添加到oSvg



  }


}  
</script>
</head>
<body>
<!--直接写svg的方法-->
<div id="div1">

</div>
</body>
</html>

本文地址：https://blog.csdn.net/qq_31949641/article/details/107893565