SVG 笔记

By | 2018/06/09

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:

     

发表评论

电子邮件地址不会被公开。 必填项已用*标注