【SVG】svg基本属性、动画

基本属性（svg设置的样式都可在css中设置）

1. viewBox 设置容器大小
2. preserveAspectRatio=“xMinYMin meet” 自适应浏览器窗口大小
3. defs 样式属性此处写入
4. linearGradient 线性渐变（还有其他渐变属性，参考官方文档）
5. g 给对应的svg路径分组，分开设置位置等
6. stroke 设置颜色
7. stroke-width 设置宽度

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet">
      <defs>
        <linearGradient id="linear" x1="20%" y1="0%" x2="0%" y2="50%">
          <stop offset="0%" style="stop-color: #235da9; stop-opacity: 1"/>
          <stop offset="50%" style="stop-color: #22579d; stop-opacity: 1"/>
          <stop offset="100%" style="stop-color: #13aad4; stop-opacity: 1"/>
        </linearGradient>
      </defs>
      <g id="group1" data-name="group_1" transform="translate(1000,30)">
        <polyline class="path path1" 
        		  stroke="url(#linear)" 
        		  stroke-width="4" 
        		  points="自己画的路径"/>
      </g>
      <g id="group2" data-name="group_2" transform="translate(900,20)">
        <polyline class="path path2"
                  points="自己画的路径"/>
      </g>
    </svg>

svg动画

1、svg沿path逐步出现

1. 使用css3配合
2. stroke-dasharray 设置虚线长度，长度为线长度或大于线长度，stroke-dashoffset 设置虚线偏移 则全部隐藏线段
3. 使用css3动画，默认出现一次，也可添加 infinite 等循环效果

.path{
    fill:none;
    stroke: url('#linear');
    stroke-width: 4;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray: 4000; // 设置虚线长度
    stroke-dashoffset: 0; // 设置虚线偏移
  }
  .path1 {
    animation: dash 3s linear;
  }
  .path2 {
    animation: dash 5s linear;
  }
  @keyframes dash {
    from {
      stroke-dashoffset: 4000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

2、svg其他物体沿path运动（未完待编辑）