可缩放矢量图(SVG)不完全教程

Created by @毛瑞

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>

显示效果

三十课 第一行 第二行
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>

显示效果

人 人 都 爱 三 十 课 30ke.cn

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 部分较基础的内容,可以做为一个入门的学习材料!

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