SVG 原理及使用

对于<path>标签，指定路径的参数比较复杂，对于复杂的图形，建议使用 SVG 编辑器来创建：

// 所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

示例如：

<!-- 开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径 -->
<svg width="100%" height="100%">
  <path d="M250 150 L150 350 L350 350 Z" />
</svg>

二 常用组件库及实践

示例：

<!-- 图形集合 -->
<svg viewBox="0 0 100 100">
  <defs>
    <g id="test">
      <circle r="5" cx="20" cy="25" fill="red" />
      <circle r="5" cx="20" cy="50" fill="blue" />
    </g>
    <g id="test2">
      <line x1="40" y1="25" x2="90" y2="25" stroke-width="8" stroke="blue">
    </g>
    <symbol id="test3">
      <line x1="40" y1="25" x2="90" y2="25" stroke-width="8" stroke="blue">
    </symbol>
  </defs>
</svg>

<!-- 可在另一个文件中引入定义的图形, use 标签的 href 须指向定义的 id -->
<svg width="30" height="30" viewBox="0 0 100 100" style="color: yellow">
  <use herf="#test"></use>
</svg>

<!-- 如果图形使用symbol标签定义的，则引用时不需要再次指定 viewBox -->
<svg width="30" height="30" style="color: yellow">
  <use herf="#test3"></use>
</svg>

Vue 封装 svg 组件示例：

// Icon 组件： Icon.vue
<template>
  <div class="icon-wrapper" :style="{...style}">
    <svg class="icon">
      <use :href="iconName"></use>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Icon',
  props: {
    name: String,
    prefix: {
      type: String,
      default: 'icon'
    },
    style: Object
  },
  setup(ctx) {
    const iconName = `#${ctx.prefix}${ctx.name}`
    return {
      iconName
    }
  }
}
</script>

// 导出 Icon 组件 并全局注册: Icon/index.js
import Icon from './Icon.vue'

export default function(Vue) {
  Vue.component(Icon.name, Icon)
}

// 入口文件use
import Icon from './components/Icon/index'
export default function(Vue) {
  Vue.use(Icon)
}

// 后续导入svg 库，便可以使用
<Icon name="xxx" :style="{}"></Icon>

对于 svg 库，可自行在Iconfont 创建（建议选择symbol方式），生成 js 文件，然后全局引入；或者复制 svg 内容粘贴到本地 defs 标签内然后引用。

三 svg 动画

1.transform 变换

与 css 的 transform 类似， 结合 keyframes 与 animation 实现动画：

matrix 可以实现其他四种的所有功能，matrix 的参数分为两组，六个数值，其中一三五一组，二四六一组，其坐标换算如：

<svg width="500" height="200" viewBox="0 0 500 200">
  <rect x="0" y="0" width="100" height="50" transform="matrix(2,1,-1,2,50,0)">
</svg>

第一组数值为 firstArr = [2, -1, 50]; 第二组数值为 secondArr = [1，2，0]。

上述代码为一个矩形，其四个顶点坐标为：[0,0], [100,0], [100,50], [0,50]。

matrix 根据旧坐标换算出新坐标，换算公式为：

newX = firstArr[0] * oldX + firstArr[1] * oldY + firstArr[2]
newY = secondArr[0] * oldX + secondArr[1] * oldY + secondArr[2]

得到的结果为：[50，0], [250,100], [200, 200], [0, 100]，根据新的坐标画出新图形。

对于其他图形也是如此，找四个点的坐标进行换算，也可以通过新旧坐标反算出 matrix。如：

得出 a, b, c, d, e, f 的结果为：matrix(0,-1,1,0,0,440)

示例：

<div>
  <svg width="220" height="220" viewbox="0 0 220 220">
    <circle cx="110" cy="110" r="85" stroke-width="25" stroke="#D1D3D7" fill="none"></circle>
    <circle
      class="circle"
      cx="110"
      cy="110"
      r="85"
      stroke-width="25"
      stroke="#00A5E0"
      fill="none"
      transform="matrix(0,-1,1,0,0,220)"
    />
  </svg>
</div>

<style>
  .circle {
    animation: circle 5s linear infinite;
  }

  @keyframes circle {
    from {
      stroke-dasharray: 0 1069;
    }
    to {
      stroke-dasharray: 1069 0;
    }
  }
</style>

注：stroke-dasharray, stroke-dashoffset

2. SMIL

SMIL 允许我们通过 HTML 标签实现动画效果，包含以下标签：

标签内的常用属性：

SVG 提供一些js接口可以用于控制动画, 如 svg.pauseAnimations()（暂停），svg.unpauseAnimations()（重启）

示例如（以下代码可正常演示，本地 Markdown 环境好像不支持动画的演示）：

<svg width="200" height="200">
  <rect x="0" y="0" width="100" height="100" fill="red">
    <set attributeName="x" attributeType="XML" to="10" begin="1s" />
    <set attributeName="x" attributeType="XML" to="20" begin="2s" />
  </rect>
</svg>

<svg width="200" height="200" viewBox="0 0 20 20">
  <circle cx="0" cy="0" r="3" fill="blue" stroke="black" stroke-width="0.1">
    <animate attributeName="cx" from="0" to="200" dur="5s" repeatCount="indefinite" />
    <animate attributeName="cy" from="0" to="200" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

<svg width="200" height="200" viewBox="0 0 200 200">
  <rect x="0" y="0" width="60" height="60" fill="red">
    <animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="2" repeatCount="indefinite" />
  </rect>
</svg>

animateMotion: 按 path 轨迹运动的正方形

<svg width="200" height="200" viewBox="0 0 200 200">
  <rect x="0" y="0" width="10" height="10" fill="red">
    <animateMotion
      path="M 10 10 L 110 10 L 110 110 L 10 110 Z"
      dur="5s"
      rotate="auto"
      fill="freeze"
      repeatCount="indefinite"
    />
  </rect>
  <path id="motion-path" d="M 10 10 L 110 10 L 110 110 L 10 110 Z" fill="none" stroke="green" />
</svg>

点击变色或位移：

<svg viewBox="0 0 200 200" width="200" height="200">
    <g id="rect1">
      <rect x="0" y="0" rx="0" ry="0" width="100" height="100" fill="red">
        <animate
          attributeType="XML"
          attributeName="fill"
          from="red"
          to="green"
          begin="rect1.click"
          dur="2s"
          fill="freeze"
        />
      </rect>
    </g>
    <animateTransform
      attributeType="XML"
      attributeName="transform"
      type="translate"
      from="0, 0"
      to="50, 50"
      begin="rect1.click"
      dur="2s"
      fill="freeze"
    />
    <rect x="0" y="100" width="100" height="100" fill="blue">
      <animate
        attributeType="XML"
        attributeName="fill"
        from="blue"
        to="green"
        begin="rect1.click"
        dur="2s"
        fill="freeze"
      />
    </rect>
</svg>

注：IE 不支持 SMIL。

参考：preserveAspectRatio W3school natsu-cc 数据可视化课程