SVG 笔记

Canvas 一直是大家的心头好，但是SVG不知怎么也逐渐越来越多受到人们的喜爱，从字体图标、图表、动效，越来越多的前端用到了这个老当益壮的技术。所以，赶快要补习了~

• svg
  根元素，重要的width, height, preserveAspectRatio, viewBox属性等
• g
  容器元素
• use
  重复使用（已经渲染的元素）元素，xlink:href指定元素，可以再次定义x y width height 等
• defs
  不会渲染，可以用 id 被使用，更多用于定义渐变等？
• symbol
  类似g，但是不会输出，而且有自己的坐标系
• 基本图形
  • rect
    width, height, x, y, rx, ry
  • circle
    cx, xy, r
  • ellipse
    cx, cy, rx, ry
  • line
    x1, y1, x2, y2, stroke, stroke-width
  • polyline
    points(“x1,y1 x2,y2”)
  • polygon
    points
  • path
    stroke-linejoin
    • moveto: Mx,y(绝对) mx,y(相对) 开始
    • line
      • Lx,y lx,y 当前点到指定点
      • H,h 水平线
      • V,v 垂直线
    • curve:
      • C,c (Cubic Bezier) Cx,y x1,y1 x2,y2 其中x1,y1是起点控制点 x2,y2终点控制点
      • S,s 假设俩控制点是反射？
      • Q,q 立方贝塞尔
      • T,t
    • arc: A,a 起点，终点，x，y半径，旋转和方向
    • closepath: Z,z
• viewport 可视区域（基本就是宽高？）
• viewBox 绘制区域
• preserveAspectRatio align meetOrSlice
• transform 创建了新的用户空间
  • translate(x, y)
  • rotate(deg [x, y]) 默认0,0 可以提供旋转原点
  • scale(x, y)
  • skewX skewY
• fill
  • fill-rule: nonzero, evenodd, inherit
  • fill-opacity:
• stroke
  • stroke-width:
  • stroke-linecap: butt round square
  • stroke-linejoin: miter round bevel
  • stroke-miterlimit: unit
  • stroke-dasharray: n1,n2…
  • stroke-dashoffset:
  • stroke-opacity:
• text: x, y, dx, dy
  • rotate: n1,n2,n3… 每个字符旋转
  • textLength: 整体长度
  • lengthAdjust: 默认spacing空白填充, spacingAndGlyphs 同时伸展
• tspan， 配合dx, dy 换行 n1 n2 n3
• textPath: 用xlink:href指定path
• linearGradient:

  <defs>
    <linearGradient id="gradientName">
      <stop offset="<%>" stop-color="<color>" stop-opacity="<value>" />
      <stop offset="<%>" stop-color="<color>" stop-opacity="<value>" />
    </linearGradient>
  </defs>