Question

• svg 是什么
  • 矢量图
  • 与 canvas 的区别
• svg 的引入方式
• 方式一：

  <?xml version="1.1" encoding="utf-8"?>
  <!DOCTYPE svg 
  PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/
  Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg"></svg>

• 方式二：
  • 图片、背景、框架
• 方式三:
  • html 页面中添加 svg
• circle :圆形
  • 圆心坐标 cx , cy
  • 半径 r
  • fill stroke stroke-width stlye 样式
  • fill = "none/transparent"
• ellipse:椭圆
  • cx 属性定义的椭圆中心的 x 坐标
  • cy 属性定义的椭圆中心的 y 坐标
  • rx 属性定义的水平半径
  • ry 属性定义的垂直半径
• rect : 矩形
  • width height 宽高
  • 坐标 x , y
  • 圆角 rx , ry
• line :线条
  • x1 , y1 , x2 , y2
  • stroke-opacity 透明 fill-opacity
• polyline:折线
  • points :点坐标（ x1 y1 x2 y2... ）或( x1,y1,x2,y2.... )
• polygon:多边形
  • 折线闭合 fill-rule:evenodd/nonzero ;
• path: 路劲
  • d 属性
  • M(起始坐标) , L(结束坐标) , H(水平线) , V(垂直线) , A(圆弧) , Z(闭合路劲)
    • C , S , Q , T 贝塞尔曲线
    • 大写为绝对坐标（具体的坐标位置)
    • 小写为相对坐标（相对起始坐标点的具体长度)
  • A 命令
    • x 半径 y 半径 角度 弧长(0 小弧 1 大弧) 方向(0 逆时针 1 顺时针)
    • 终点 (x y)
• C 命令：三次贝塞尔曲线
  • (x1,y1,x2,y2,x,y) x1 , y1 控制点一 x2 , y2 控制点二 x , y 结束点
• S 命令：平滑贝塞尔曲线（自动对称一个控制点)
  • (x2,y2,x,y) x2 , y2 控制点 x,y 结束点
• Q 命令：二次贝塞尔曲线
  • (x1,y1,x,y) x1,y1 控制点 x,y 结束点
• T 命令：一次贝塞尔曲线
  • (x,y) 结束点
• g 标签:组合元素 设置元素公共属性
  • 共用属性
  • transform = "translate(0,0)"
• text 标签
  • x , y , text-anchor (对齐 start end middle) font-size
• image 标签
  • x , y , width height
  • xlink:href (图片地址)