SVG基础案例

案例一：靶心

<div style="width:400;height: 400;background-color: white;">
    <svg  xmlns="http://www.w3.org/2000/svg" version="1.1" width='100%' height=100%>
        <g transform='translate(200,200)' stroke='red' stroke-width='5'>
            <circle r='80' fill='transparent'></circle>
            <circle r='60' fill='transparent'></circle>
            <circle r='40' fill='transparent'></circle>
            <circle r='20' fill='transparent'></circle>
        </g>
    </svg>
</div>

<g>标签：是一个容器(分组)标签,用来组合元素的，可以添加id属性

1. 里面可以添加公共属性

2.. transform='translate(200,200)'： 表示对图形进行平移

注意：svg属性中的宽高必须有，transform = 'translate(0,0)'里面不能使用百分比

1. <text>标签

水平居中：text-anchor='middle'（居中）

text-anchor='start'（靠右：默认）

text-anchor='end'（靠左）

垂直居中：文字的一半再减去2，再加上Y（可用但不规范）

2.. <image>标签

<image x='200' y='200' width='100' height='100' xlink:href='路径'></image>

3. JS动态创建svg

1. 创建 ：createElementNS（命名空间，标签名）

封装createTag函数

分离数据

window.onload = function (){
    document.ctreateElementNS()
}

案例二：兴趣图谱

<div id="parent" style=" width: 780px; height: 400px; background-color: white;
     margin: 20px auto; overflow: hidden;">
</div>
<script>
      window.onload = function () {
        var svgNS = "http://www.w3.org/2000/svg";
        var oParent = document.getElementById("parent");
        var centerX = oParent.offsetWidth / 2;
        var centerY = oParent.offsetHeight / 2;
        var circleNum = 9;
        var angleNum = 360 / circleNum;
        var centerR = 150;
        var otherDate = [];
        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;
          otherDate.push({ x, y, text: i });
        }
        var date = {
          centerNode: { text: "keluzi" },
          otherNode: otherDate,
        };
        function createTag(tag, objAttr) {
          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 (let i = 0; i < date.otherNode.length; i++) {
            addOtherTag(date.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 = date.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);
          oParent.appendChild(oSvg);
          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);
        }
        bindTag();
        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 prevCircle = this.nextElementSibling;
              startMove(prevCircle.getElementsByTagName("circle")[0], 30, 40);
            };
            aLine[i].onmouseleave = function () {
              this.getElementsByTagName("line")[0].setAttribute( "stroke", "#ccc" );
              this.getElementsByTagName("rect")[0].setAttribute("fill", "#999");
              var prevCircle = this.nextElementSibling;
              startMove(prevCircle.getElementsByTagName("circle")[0], 40, 30);
            };
          }
        }
        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);
            }
          }, 30);
        }
      };
    </script>

案例三：测距

 

<di id="div1" style=" width: 780px; height: 400px; background-color: white; 
   margin: 20px auto; overflow: hidden; " >
   <svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1"
        width="100%" height="100%" >
  </svg>
</div>
<script>
  window.onload = function () {
    var svgNS = "http://www.w3.org/2000/svg";
    var oParent = document.getElementById("div1");
    var oSvg = document.getElementById("svg1");
    var oPolyLine = null;
    var pointsNum = "";
    function createTag(tag, objAttr) {
      var oTag = document.createElementNS(svgNS, tag);
      for (var attr in objAttr) {
        oTag.setAttribute(attr, objAttr[attr]);
      }
      return oTag;
    }

    oSvg.onmousedown = function (ev) {
      var ev = ev || window.event;
      if (!oPolyLine) {
        oPolyLine = createTag("polyline", {
              fill: "none",
              stroke: "red",
              "stroke-width": "2",
          });
          oSvg.appendChild(oPolyLine);
       }

       var x = ev.clientX - oParent.offsetLeft;
       var y = ev.clientY - oParent.offsetTop;
       if (pointsNum == "") {
           pointsNum = x + "," + y;
        } else {
            pointsNum += "," + x + "," + y;
        }
        oPolyLine.setAttribute("points", pointsNum);
          var oCircle = createTag("circle", {
            cx: x,
            cy: y,
            r: "5",
            fill: "white",
            stroke: "red",
            "stroke-width": "3",
          });

          oSvg.appendChild(oCircle);
        };

        oSvg.onmousemove = function (ev) {
          var ev = ev || window.event;
          if (oPolyLine) {
            var x = ev.clientX - oParent.offsetLeft;
            var y = ev.clientY - oParent.offsetTop;
            oPolyLine.setAttribute("points", pointsNum + "," + x + "," + y);
          }
        };
        oSvg.oncontextmenu = function () {
          oSvg.onmousemove = null;
          return false;
        };
      };
</script>

 4. <path>：路径

M-起始坐标点命令

L-后续坐标点命令

Z-收尾自动闭合（放在最后）

H-水平绘制

V-垂直绘制

大写相对于画布的坐标，小写字母相当于线段长度

A-绘制弧形

  - X半径

  - Y半径

  - 角度

  - 弧长  - 0 小弧  - 1 大弧

  - 方向  - 0 逆时针  - 1 顺时针

  - 终点X坐标

  - 终点Y坐标

5. animate标签

  - attributeName :运动的属性

  - dur:时间

  - from ： 开始起点

  - to：结束终点

案例：占比环形图（比例大于50%后图形会变形）

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>svg_path</title>
  </head>
  <body style="background-color: #000">
    <div
      id="div1"
      style="
        width: 780px;
        height: 400px;
        background-color: white;
        margin: 20px auto;
        overflow: hidden;
      "
    >
      <svg
        id="svg1"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        width="100%"
        height="100%"
      >
        <!-- <path d='M50 100L200 200L100 100Z M300 100 L 300 300' stroke='black' stroke-width='5' fill='none'></path> -->
        <!-- 200表示线段最右边到盒子最左边距离 -->
        <!-- <path d='M50 100H200V200' stroke='black' stroke-width='5' fill='none'></path> -->
        <!-- <path d='M100 100A100 100 0 0 0 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 175 Z' stroke='black' stroke-width='5' fill='none'></path> -->
      </svg>
      <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
      <script>
        window.onload = function () {
          var svgNS = "http://www.w3.org/2000/svg";
          var oParent = document.getElementById("div1");
          var oSvg = document.getElementById("svg1");
          var oPath = oSvg.getElementsByTagName("path");

          function createTag(tag, objAttr) {
            var oTag = document.createElementNS(svgNS, tag);
            for (var attr in objAttr) {
              oTag.setAttribute(attr, objAttr[attr]);
            }
            return oTag;
          }

          var arrNum = [23.32, 15.56, 18.65, 8.02, 11.26, 23.19];
          var angle = 360;

          var outerR = 120;
          var innerR = 70;
          var centerX = 200;
          var centerY = 200;
          var arrColor = [
            "red",
            "blue",
            "orange",
            "yellow",
            "green",
            "pink",
            "gray",
          ];
          for (var i = 0; i < arrNum.length; i++) {
            var oPath = createTag("path", { fill: arrColor[i] });
            oSvg.appendChild(oPath);
          }

          $("#div1").animate(
            { move: "auto" },
            {
              duration: 500,
              easing: "linear",
              step: function (a, b) {
                // b.pos;
                var sumNum = 0;
                var outerXY = [{ x: 320, y: 200 }];
                var innerXY = [{ x: 270, y: 200 }];

                for (let 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 * b.pos * Math.PI) / 180) * outerR +
                    centerX;
                  var outerY =
                    Math.sin((sumNum * b.pos * Math.PI) / 180) * outerR +
                    centerY;
                  outerXY.push({ x: outerX, y: outerY });

                  var innerX =
                    Math.cos((sumNum * b.pos * Math.PI) / 180) * innerR +
                    centerX;
                  var innerY =
                    Math.sin((sumNum * b.pos * Math.PI) / 180) * innerR +
                    centerY;
                  innerXY.push({ x: innerX, y: innerY });
                }
                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,
                  });
                  oSvg.appendChild(oPath);
                }
              },
            }
          );
        };
      </script>
    </div>
  </body>
</html>

 svg基础菜鸟教程：SVG 教程 | 菜鸟教程