SVG - 基础图形

Kamimika...大约 5 分钟

SVG (Scalable Vector Graphics) 可伸缩矢量图形open in new window是一种不随放大缩小而失真的矢量图形格式

本文介绍了 SVG 的一些基础语法

在`html`中使用`svg`

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"></svg>

xmlns 属性：SVG 命名空间

视口(Viewport)和视图框(ViewBox)

视口(Viewport)

属性width和height，表示 SVG 图像的宽高

视图框(ViewBox)

属性viewBox，SVG 空间的视口空间

例如：viewBox="0 0 100 200"表示从 SVG 图像显示坐标系(0, 0)开始宽度100 单位，高度200 单位的矩形空间

注意

viewBox中的后两位数并不表示坐标，而是代表长宽

常用形状元素

<rect> 矩形

属性	描述
x, y	左上角坐标
width, height	矩形宽高
rx, ry	圆角半径

矩形

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="200"
  height="200"
>
  <rect
    x="10"
    y="10"
    width="50"
    height="50"
    style="stroke:#000; fill:#42b883;"
  />
</svg>

圆角矩形

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="200"
  height="200"
>
  <rect
    x="10"
    y="10"
    width="50"
    height="50"
    rx="10"
    ry="10"
    style="stroke:#000; fill:#42b883;"
  />
</svg>

<circle> 圆形

属性	描述
cx, cy	圆心坐标
r	半径

圆形

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="200"
  height="200"
>
  <circle cx="30" cy="30" r="20" style="stroke:#000; fill:#42b883;" />
</svg>

<ellipse> 椭圆

属性	描述
cx, cy	圆心坐标
rx, ry	横纵半径

椭圆

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="200"
  height="200"
>
  <ellipse cx="30" cy="30" rx="20" ry="10" style="stroke:#000; fill:#42b883;" />
</svg>

<line> 直线

属性	描述
x1, y1	起点坐标
x2, y2	终点坐标

直线

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="200"
  height="200"
>
  <line x1="0" y1="100" x2="100" y2="0" style="stroke:#000;" />
</svg>

<polyline> 折线

属性	描述
points	折线坐标（以空格分隔每个坐标，以`,`分隔`x`与`y`）

折线（未闭合）

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="200"
  height="200"
>
  <polyline points="0,10 50,100 100,10" style="stroke:#000; fill:#42b883;" />
</svg>

<polygon> 多边形

属性	描述
points	折线坐标

提示

规范上：以空格分隔每个坐标，以,分隔x与y。
但实际上：空格与 , 并无区别。

折线（闭合）

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="200"
  height="200"
>
  <polygon points="0,10 50,100 100,10" style="stroke:#000; fill:#42b883;" />
</svg>

提示

<polyline>(折线) 与 <polygon>(多边形) 的区别：
<polyline>(折线)不会自动闭合图形，<polygon>(多边形)会自动闭合图形

<path> 任意路径

属性	描述
d	路径命令

路径命令	描述
大写字母	绝对坐标
小写字母	相对坐标（相对于当前位置）
`M x,y`	向点`(x, y)`移动画笔
`m dx,dy`	向相对位置`(dx, dy)`移动画笔
`L x,y`	从当前位置向点`(x, y)`绘制线段
`l dx,dy`	向当前位置的相对位置`(dx, dy)`绘制线段
`H x`	从当前位置绘制水平线至`x`处
`h dx`	向相对位置`dx`绘制水平线
`V y`	从当前位置绘制垂直线至`y`处
`v dy`	向相对位置`dy`绘制垂直线
`A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y`	`rx`,`ry`：椭圆半径；`x-axis-rotation`：旋转（弧度）；`large-arc-flag`：劣弧`0`，优弧`1`；`sweep-flag`：逆时针`0`，顺时针`1`；`x`,`y`终点坐标
`a rx,ry x-axis-rotation large-arc-flag sweep-flag dx,dy`	`rx`,`ry`：椭圆半径；`x-axis-rotation`：旋转（弧度）；`large-arc-flag`：劣弧`0`，优弧`1`；`sweep-flag`：逆时针`0`，顺时针`1`；`dx`,`dy`终点相对坐标
`Q x1,y1 x,y`	以当前位置为起点，`(x1, y1)`为控制点，`(x, y)`为终点绘制二次贝塞尔曲线
`q dx1,dy1 dx,dy`	以当前位置为起点，相对位置`(dx1, dy1)`为控制点，相对位置`(dx, dy)`为终点绘制二次贝塞尔曲线
`T x,y`	通过上一个二次贝赛尔曲线命令的控制点推算出控制点，以`(x, y)`为终点绘制二次贝赛尔曲线
`t dx,dy`	通过上一个二次贝赛尔曲线命令的控制点推算出控制点，以相对位置`(dx, dy)`为终点绘制二次贝赛尔曲线
`C x1,y1 x2,y2 x,y`	以当前位置为起点，`(x1, y1)`为起点控制点，`(x2, y2)`为终点控制点，`(x, y)`为终点绘制三次贝塞尔曲线
`c dx1,dy1 dx2,dy2 dx,dy`	以当前位置为起点，相对位置`(dx1, dy1)`为起点控制点，`(dx2, dy2)`为终点控制点，`(dx, dy)`为终点绘制三次贝塞尔曲线
`S x2,y2 x,y`	通过上一个三次贝赛尔曲线命令的终点控制点推算出起点控制点，以`(x2, y2)`为终点控制点，`(x, y)`为终点绘制三次贝赛尔曲线
`s dx2,dy2 dx,dy`	通过上一个三次贝赛尔曲线命令的终点控制点推算出起点控制点，以相对位置`(dx2, dy2)`为终点控制点，`(dx, dy)`为终点绘制三次贝赛尔曲线
`Z` 或 `z`	闭合路径