SVG动画

SVG

<svg height="200" width="200" viewBox="0 0 220 220"
    xmlns="http://www.w3.org/2000/svg">
    ...
</svg>

SVG in HTML

<div class="container">
  <svg
    width="400"
    height="400"
    viewPort="0 0 400 400"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    class="......"
  >
    ...
  </svg>
</div>

SVG 形状

polyline 折线

• points 端点坐标集合，例：“0 0, 0 1, 1 1, 1 0”
• stroke-linejoin 线转角处的衔接方法，arcs | bevel |miter | miter-clip | round
• stroke-linecap 线两端的形状，butt | round | square | inherit
• stroke-dasharray 划线与间隔
• stroke-dashoffset 虚线的偏移量

line

• x1
• y1
• x2
• y2

path

polygon 多边形

• points 拐点坐标，例：“0 0, 0 1, 1 1, 1 0”
• fill

rect

• x 左上角 x
• y 左上角 y
• width
• height
• rx 圆角 x 方向半径
• ry 圆角 y 方向半径

circle

• r
• cx 圆心 x
• cy 圆心 y

ellipse

• rx 椭圆 x 半径
• ry 椭圆 y 半径
• cx
• cy

SVG 动画

用 css 写出相应 animation 即可