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

最新推荐文章于 2021-10-15 16:38:38 发布

anITfish

最新推荐文章于 2021-10-15 16:38:38 发布

阅读量268

点赞数

分类专栏： svg html 文章标签： html svg

本文链接：https://blog.csdn.net/qq_31949641/article/details/107893565

版权

html 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

svg

11 篇文章 0 订阅

订阅专栏

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

<!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>

anITfish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
SVG学习——6.实现圆与中心圆连接

跟着视频做的，对方数据是车子。我随便改了一下，要贴合最近的心情。效果图如下：代码如下：<!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 {bac
复制链接

扫一扫