[05天]SVG矢量图形学习

什么是SVG

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。  

SVG 使用 XML 格式定义图像

一个SVG图形

如下所示，是一个 SVG 文档结构

<svg width='300' height='300' xmlns='http://wwww.w3.org/2000/svg'>
  <!-- 在这里绘制图像 -->
</svg>

width 和 height 属性可设置此 SVG 文档的宽度和高度

SVG坐标系统

可参考Canvas坐标系统

SVG 形状

• 矩形 <rect>

• 圆形 <circle>

• 椭圆 <ellipse>

• 线 <line>

• 折线 <polyline>

• 多边形 <polygon>

• 路径 <path>

   

矩形<rect>

绘制一个矩形

<svg width="200" height="120" xmlns="http://wwww.w3.org/2000/svg">
    <rect width="100" height="100" x="20" y="20" rx="5" ry="5"></rect>
</svg>

实时渲染效果：

属性说明

• x 左侧距离(相对于SVG文档)

• y 上部距离(相对于SVG文档)

• width 宽

• height 高

• rx x轴方向圆角深度

• ry y轴方向圆角深度

圆形 <circle>

绘制一个圆形

  <svg width='100' height='100' xmlns='http://wwww.w3.org/2000/svg'>
    <circle cx="50" cy="50" r="40"/>
  </svg>

属性说明

• cx 圆心横坐标

• cy 圆心纵坐标

• r 半径

椭圆 <ellipse>

绘制一个椭圆

  <svg width='100' height='100' xmlns='http://wwww.w3.org/2000/svg'>
    <ellipse cx="50" cy="50" rx="50" ry="30"/>
  </svg>

属性说明

• cx 属性定义圆点的 x 坐标

• cy 属性定义圆点的 y 坐标

• rx 属性定义水平半径

• ry 属性定义垂直半径

线 <line>

绘制一条线段

  <svg width='100' height='100' xmlns='http://wwww.w3.org/2000/svg'>
    <line x1="0" y1="0" x2="50" y2="80" style="stroke:rgb(99,99,99);stroke-width:2"/>
  </svg>

属性说明

• x1 属性在 x 轴定义线条的开始 

• y1 属性在 y 轴定义线条的开始 

• x2 属性在 x 轴定义线条的结束 

• y2 属性在 y 轴定义线条的结束

折线 <polyline>

绘制一条折线

  <svg width='100' height='100' xmlns='http://wwww.w3.org/2000/svg'>
    <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
  </svg>

属性说明

points: x,y x,y ... 由多组x,y坐标组成的点位集合

多边形 <polygon>

绘制一个多边形

  <svg width='300' height='250' xmlns='http://wwww.w3.org/2000/svg'>
    <polygon points="220,100 300,210 170,250"
    style="fill:#cccccc;
    stroke:#000000;stroke-width:1"/>
  </svg>

属性说明

points: x,y x,y ... 由多组x,y坐标组成的点位集合

路径 <path>

绘制一条路径

  <svg width='100' height='100' xmlns='http://wwww.w3.org/2000/svg'>
    <path d="M0 0 L50 100 L50 50 Z" />
  </svg>

属性说明

• M = moveto  需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。类似于移动画笔的位置.区分大小写，大写M为绝对位置，小写m为相对位置

• L = lineto 需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段

• H = horizontal lineto 一个参数，绘制平行线标明在x轴移动到的位置，因为它们都只在坐标轴的一个方向上移动

• V = vertical lineto  一个参数，绘制垂直线标明在y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动

• C = curveto  三次贝塞尔曲线， 见下方详解

• S = smooth curveto 贝塞尔曲线命令， 见下方详解

• Q = quadratic Belzier curve  二次贝塞尔曲线， 见下方详解

• T = smooth quadratic Belzier curveto 与S命令相似，是Q命令的简写命令， 见下方详解

• A = elliptical Arc 弧，容许不闭合。能够想像成是椭圆的某一段， 见下方详解

• Z = closepath Z命令会从当前点画一条直线到路径的起点。不区分大小写

C指令：

三次贝塞尔曲线。(x,y)表示的是曲线的终点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。

C x1 y1, x2 y2, x y

S指令：

当一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变），可以使用S命令。简写的贝塞尔曲线命令。如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点

S x2 y2, x y

Q指令：

二次贝塞尔曲线Q，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。

Q x1 y1, x y

T指令：

与S命令相似，是Q命令的简写命令。
与S命令相似，T也会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线

T x y

A指令：

A指令有七个参数,较为复杂，用到再看

SVG 文字

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="0" y="15" fill="red">Lenton</text>
</svg>

Lenton

SVG viewbox

中文翻译为视区，就是在svg上截取一小块，放大到整个svg显示

<svg width="300" height="300" style="border: 1px solid steelblue" 
    viewbox="105 55 60 60"><rect x="10" y="10" width="200" height="100" fill="skyblue"></rect></svg>

• 105 表示相对于svg左上角的横坐标。 

• 55 表示相对于svg左上角的纵坐标。

• 60 表示截取的视区的宽度。 

• 60 表示截取的视区的高度。

2022-11-17补充更多内容:

陆-SVG矢量图形学习进阶