三十课 - 可缩放矢量图（SVG）不完全教程

1 前言

在工程中经常会用到各种小图标，与其引入图标库或下载图片，自己绘制SVG也是不错的选择。可缩放矢量图（SVG）的优点这里就不做叙述了，但真的是时候好好学习一下神奇的 SVG 了。

让我们一起马上开始神奇的 SVG 学习之旅吧！

2.1 矩形-rect

2.1.1 基本属性

x ：定义左侧距离
y ：定义顶端距离
width ：定义宽度
height ：定义高度
rx ：X轴方向圆角
ry ：Y轴方向圆角

<svg>
  <rect x="10" y="10" width="150" height="100" rx="10" ry="10" />
</svg>

显示效果

2.1.2 填充样式

fill ：定义填充颜色
fill-opacity ：定义填充颜色透明度（0-1之间）

<svg>
  <rect width="150" height="100" style="fill:blue;fill-opacity:0.25;" />
</svg>

显示效果

2.1.3 边框样式

stroke ：定义边框颜色
stroke-width ：定义边框宽度
stroke-opacity ：定义边框透明度

<svg>
  <rect width="150" height="100"
    style="stroke:blue;stroke-width:2; stroke-opacity: 0.5; fill:white;" />
</svg>

显示效果

2.2 圆形-circle

cx ：定义X轴坐标
cy ：定义Y轴坐标
r ：定义半径
fill ：定义填充颜色
stroke ：定义轮廓颜色

<svg>
  <circle cx="80" cy="80" r="75" fill="red" fill-opacity="0.1"
    stroke="blue" stroke-width="2" stroke-opacity="0.5" />
</svg>

显示效果

2.3 椭圆-ellipse

cx ：定义圆心X轴坐标
cy ：定义圆心Y轴坐标
rx ：定义X轴半径
ry ：定义Y轴半径

<svg>
  <ellipse cx="85" cy="60" rx="80" ry="50" style="fill:red; fill-opacity: 0.1;
    stroke: blue;stroke-width: 2; stroke-opacity: 0.5"/>
</svg>

显示效果

2.4 直线-line

x1 ：定义起点X轴坐标
y1 ：定义起点Y轴坐标
x2 ：定义终点X轴坐标
y2 ：定义终点Y轴坐标

<svg>
  <line x1="10" y1="30" x2="160" y2="30"
    style="stroke: red;stroke-width: 2; stroke-opacity: 0.25"/>
</svg>

显示效果

2.5 折线-polyline

points ：点集数列。每个数字用逗号分隔开。
每个点必须包含2个数字，一个是x坐标，一个是y坐标。

<svg>
  <polyline points="10,10,10,90,150,90,150,10"
    style="fill:none;stroke: red;stroke-width: 2; stroke-opacity: 0.25"/>
</svg>

显示效果

2.6 多边形-polygon

points ：点集数列。每个数字用逗号分隔开。
每个点必须包含2个数字，一个是x坐标，一个是y坐标。

<svg>
  <polygon points="10,10,10,90,150,90,150,60"
    style="fill:none;stroke: red;stroke-width: 2; stroke-opacity: 0.25"/>
</svg>

显示效果

2.7 路径-path

2.7.1 直线命令

<path>元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。path只需要设定很少的点，就可以创建平滑流畅的曲线。

M x y ：Move to，移动到某一点
L x y ：Line to，画线到某一点
H x ：Horizontal line to ，绘制水平线
V y ：Vertical line to ，绘制垂直线
Z ：Close path ，闭合路径

<svg>
  <path d="M10 10 H 150 V 90 H 10 L 10 10"
    fill="none" stroke="blue" stroke-width="2">
</svg>

显示效果

2.7.2 二次贝塞尔曲线

Q x1 y1, x y ：Quadratic Bézier curve，其中 x1 y1 是控制点，x y 是终点

<svg>
  <path d="M10 80 Q 95 10, 180 80" stroke="purple" fill="transparent" />
  <circle r="3" cx="10" cy="80" fill="red" />
  <circle r="3" cx="95" cy="10" fill="green" />
  <circle r="3" cx="180" cy="80" fill="blue" />
</svg>

显示效果

2.7.3 二次贝塞尔曲线延伸

T x y ： Smooth Quadratic Bézier curve to，其中 x y 是延伸部分的终点
T 命令前必须有 Q 命令或另一个 T 命令

<svg>
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="purple" fill="transparent" />
  <circle r="3" cx="10" cy="80" fill="red" />
  <circle r="3" cx="52.5" cy="10" fill="green" />
  <circle r="3" cx="95" cy="80" fill="blue" />
  <circle r="3" cx="180" cy="80" fill="yellow" />
</svg>

显示效果

2.7.4 三次贝塞尔曲线

三次贝塞尔曲线有两个控制点。

C x1 y1, x2 y2, x y ： Curve to，其中 x1 y1 是第一控制点，x2 , y2 是第二控制点， x y 是终点

<svg>
  <path d="M10 80 C 50 10, 140 10, 180 80" stroke="purple" fill="transparent" />
  <circle r="3" cx="10" cy="80" fill="red" />
  <circle r="3" cx="50" cy="10" fill="green" />
  <circle r="3" cx="140" cy="10" fill="blue" />
  <circle r="3" cx="180" cy="80" fill="yellow" />
</svg>

显示效果

2.7.5 三次贝塞尔曲线延伸

S x2 y2, x y ： Smooth Curve to，其中 x2 y2 是延伸部分第二控制点， x y 是终点

<svg>
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
     stroke="purple" fill="transparent" />
  <circle r="3" cx="10" cy="80" fill="red" />
  <circle r="3" cx="40" cy="10" fill="green" />
  <circle r="3" cx="65" cy="10" fill="blue" />
  <circle r="3" cx="95" cy="80" fill="yellow" />
  <circle r="3" cx="150" cy="150" fill="pink" />
  <circle r="3" cx="180" cy="80" fill="green" />
</svg>

显示效果

2.7.6 弧形

A rx ry x-axis-rotation large-arc-flag sweep-flag x y ： Elliptical Arc
rx ry ： X轴半径和Y轴半径
x-axis-rotation ： X轴旋转角度
large-arc-flag ：角度大小，0表示小角度，1表示大角度
sweep-flag ：弧线的方向，0表示逆时针，1表示顺时针
x y：弧形的终点坐标

<svg>
  <path d="M10 150 A 30 50 30 0 1 180 120"
    stroke="purple" fill="transparent" stroke-width="2" />
</svg>

显示效果

2.8 文本-text

2.8.1 基本属性

x / y ：表示文本显示坐标。
text-anchor ：文本显示位置[start,middle,end,inherit]

<svg>
  <text x="100" y="30" text-anchor="start" style="font-size:1.5em;">三十课</text>
  <text x="100" y="80" text-anchor="middle" style="font-size:1.5em;">三十课</text>
  <text x="100" y="130" text-anchor="end" style="font-size:1.5em;">三十课</text>
</svg>

显示效果

2.8.2 文本分组

tspan ：文本分组，每个tspan可以包含不同的格式和位置。

<svg>
  <text x="20" y="30">三十课
      <tspan x="40" y="60">tspan-第一行</tspan>
      <tspan x="40" y="90">tsapn-第二行</tspan>
  </text>
</svg>

显示效果

2.8.3 文本链接

a href ：文本链接同HTML链接。

<svg>
    <a href="http://30ke.cn" target="_blank">
        <text x="20" y="50" style="font-size: 2.5em;">三十课</text>
    </a>
</svg>

显示效果

2.8.4 文本旋转

transform rotate ：按指定坐标整体旋转。
rotate ：旋转单个文字。

<svg>
   <text x="20" y="20"  transform="rotate(30 20,20)">三十课网站</text>
   <text x="20" y="90"  rotate="30">三十课网站</text>
</svg>

显示效果

2.8.5 路径上的文字

path ：定义路径。
textPath ：引用路径。

<svg>
   <path id="my_path" d="M10 100 Q 95 10, 180 100" fill="none" stroke="blue" stroke-opacity="0.1" />
   <text>
       <textPath xlink:href="#my_path">人 人 都 爱  三  十  课  30ke.cn </textPath>
   </text>
</svg>

显示效果

2.9 图片-image

x y ：指定显示坐标，默认值为 0
width ：定义宽度
height ：定义高度

<svg>
  <image xlink:href="30ke_icon.png" x="0" y="0" height="164" width="128"/>
</svg>

显示效果

3.1 填充-fill

fill ：定义填充颜色
fill-opacity ：定义填充颜色透明度（0-1之间）

<svg>
  <rect width="150" height="100" style="fill:purple;fill-opacity:0.25;" />
</svg>

显示效果

3.2 边框-stroke

3.2.1 基本属性

stroke ：定义边框颜色
stroke-width ：定义边框宽度
stroke-opacity ：定义边框透明度

<svg>
  <rect width="150" height="100"
    style="stroke:purple;stroke-width:5; stroke-opacity: 0.25; fill:white;" />
</svg>

显示效果

3.2.2 端点形状-linecap

butt ：直角端点
square ：直角端点，长度大于 butt
round ：圆角端点

<svg>
  <line x1="20" y1="20" x2="150" y2="20" stroke-linecap="butt" stroke="blue" stroke-width="10" />
  <line x1="20" y1="55" x2="150" y2="55" stroke-linecap="square" stroke="blue" stroke-width="10" />
  <line x1="20" y1="90" x2="150" y2="90" stroke-linecap="round" stroke="blue" stroke-width="10" />
</svg>

显示效果

3.2.3 连接点形状-linejoin

miter ：尖角连接
round ：圆角连接
bevel ：切角连接

<svg>
  <polyline points="20 70 90 20 160 70" stroke-linejoin="miter" stroke="blue" stroke-width="20" fill="none" />
  <polyline points="20 120 90 70 160 120" stroke-linejoin="round" stroke="blue" stroke-width="20" fill="none" />
  <polyline points="20 170 90 120 160 170" stroke-linejoin="bevel" stroke="blue" stroke-width="20" fill="none" />
</svg>

显示效果

3.2.4 虚线设置-dasharray

stroke-dasharray ：参数是一组用逗号分割的数字组成的数列
第一个参数用来表示填色区域的长度
第二参数个用来表示非填色区域的长度

<svg>
  <path stroke-dasharray="5,5" d="M10 30 h150" stroke="black" stroke-width="2" />
  <path stroke-dasharray="10,5" d="M10 65 h150" stroke="black" stroke-width="2" />
  <path stroke-dasharray="10,5,5,5,5,5" d="M10 100 h150" stroke="black" stroke-width="2" />
</svg>

显示效果

4.1 线性渐变-linearGradient

4.1.1 水平线性渐变

<svg>
  <linearGradient id="gradient1">
      <stop stop-color="red" offset="0%" />
      <stop stop-color="black" stop-opacity="0" offset="50%" />
      <stop stop-color="blue" offset="100%" />
  </linearGradient>
  <rect x="10" y="10" width="160" height="100" fill="url(#gradient1)" />
</svg>

显示效果

4.1.2 垂直线性渐变

<svg>
  <linearGradient id="gradient2" x1="0" y1="0" x2="0" y2="1">
      <stop stop-color="red" offset="0%" />
      <stop stop-color="black" stop-opacity="0" offset="50%" />
      <stop stop-color="blue" offset="100%" />
  </linearGradient>
  <rect x="10" y="10" width="160" height="100" fill="url(#gradient2)" />
</svg>

显示效果

4.2 径向渐变-radialGradient

4.2.1 基本径向渐变

<svg>
  <radialGradient id="radialGradient1">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
  </radialGradient>
  <rect x="10" y="10" width="160" height="100" fill="url(#radialGradient1)" />
</svg>

显示效果

4.2.2 中心与焦点

cx cy r ：定义渐变结束圆环
fx fy ：定义焦点位置

<svg>
  <radialGradient id="radial2" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
  </radialGradient>
  <rect x="10" y="10" width="160" height="100" fill="url(#radial2)" />
</svg>

显示效果

4.2.3 渐变终点形为

spreadMethod="pad" ：默认，到达终点时，用最终偏移色填充剩余空间
spreadMethod="repeat" ：到达终点时，重复执行红蓝渐变
spreadMethod="reflect" ：到达终点时，反向执行红蓝渐变

<svg>
  <radialGradient id="radial3" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25" spreadMethod="repeat">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
  </radialGradient>
  <radialGradient id="radial4" cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25" spreadMethod="reflect">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
  </radialGradient>
  <rect x="10" y="10" width="160" height="100" fill="url(#radial3)" />
  <rect x="10" y="120" width="160" height="100" fill="url(#radial4)" />
</svg>

显示效果

5.1 平移-translate

translate(20,10) ：将图形向左平移20，向下平移10

<svg>
  <rect x="0" y="0" width="120" height="90" transform="translate(20,10)" />
</svg>

显示效果

5.2 旋转-rotate

rotate(10) ：旋转10度

<svg>
  <rect x="50" y="10" width="120" height="50" fill-opacity="0.1" />
  <rect x="50" y="10" width="120" height="50" transform="rotate(5)" fill-opacity="0.2" />
  <rect x="50" y="10" width="120" height="50" transform="rotate(10)" fill-opacity="0.4" />
  <rect x="50" y="10" width="120" height="50" transform="rotate(15)" fill-opacity="0.8" />
</svg>

显示效果

5.3 倾斜-skew

skewX(10) ：延 X 轴倾斜10度
skewY(10) ：延 Y 轴倾斜10度

<svg>
  <rect x="30" y="10" width="100" height="80" transform="skewX(5)" fill-opacity="0.2" />
  <rect x="30" y="10" width="100" height="80" transform="skewX(10)" fill-opacity="0.7" />
  <rect x="30" y="10" width="100" height="80" transform="skewX(15)" />
  <rect x="30" y="110" width="100" height="80" transform="skewY(5)" fill-opacity="0.2" />
  <rect x="30" y="110" width="100" height="80" transform="skewY(10)" fill-opacity="0.7" />
  <rect x="30" y="110" width="100" height="80" transform="skewY(15)" />
</svg>

显示效果

5.4 缩放-scale

scale(2) ：缩放比例

<svg>
  <rect x="10" y="10" width="70" height="40" transform="scale(2)" />
  <circle r="2" cx="10" cy="10" />
  <circle r="2" cx="160" cy="10" />
  <circle r="2" cx="10" cy="100" />
</svg>

显示效果

6.1 剪切-clip

<svg>
  <clipPath id="cut-off">
      <rect x="0" y="10" width="170" height="60" />
  </clipPath>
  <rect x="10" y="10" width="150" height="120" clip-path="url(#cut-off)" fill-opacity="0.75" />
  <rect x="10" y="10" width="150" height="120" fill-opacity="0.03" />
</svg>

显示效果

6.2 遮罩-mask

<svg>
  <linearGradient id="lg2">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
  </linearGradient>
  <mask id="mask2">
      <rect x="0" y="0" width="150" height="120" fill="url(#lg2)" />
  </mask>
  <rect x="0" y="0" width="150" height="120" fill="red" mask="url(#mask2)" />
</svg>

显示效果

7.1 结语

本文只包括 SVG 部分较基础的内容，可以做为一个入门的学习材料！

另因时间及水平有限，在翻译及汇编过程中会有错误产生，如发现错误请不吝指正！谢谢。

可缩放矢量图（SVG）不完全教程

Created by @毛瑞

1 前言

2.1 矩形-rect

2.1.1 基本属性

2.1.2 填充样式

2.1.3 边框样式

2.2 圆形-circle

2.3 椭圆-ellipse

2.4 直线-line

2.5 折线-polyline

2.6 多边形-polygon

2.7 路径-path

2.7.1 直线命令

2.7.2 二次贝塞尔曲线

2.7.3 二次贝塞尔曲线延伸

2.7.4 三次贝塞尔曲线

2.7.5 三次贝塞尔曲线延伸

2.7.6 弧形

2.8 文本-text

2.8.1 基本属性

2.8.2 文本分组

2.8.3 文本链接

2.8.4 文本旋转

2.8.5 路径上的文字

2.9 图片-image

3.1 填充-fill

3.2 边框-stroke

3.2.1 基本属性

3.2.2 端点形状-linecap

3.2.3 连接点形状-linejoin

3.2.4 虚线设置-dasharray

4.1 线性渐变-linearGradient

4.1.1 水平线性渐变

4.1.2 垂直线性渐变

4.2 径向渐变-radialGradient

4.2.1 基本径向渐变

4.2.2 中心与焦点

4.2.3 渐变终点形为

5.1 平移-translate

5.2 旋转-rotate

5.3 倾斜-skew

5.4 缩放-scale

6.1 剪切-clip

6.2 遮罩-mask

7.1 结语