2025年svg元素介绍

大家好，我是讯享网，很高兴认识大家。

网格

SVG使用的坐标系统或者说网格系统，以页面的左上角(0, 0)为坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。在HTML文档中，元素都是用这种方式定位。

讯享网

元素形状

(完整版元素介绍)[https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element]

下面列举的是部分常用的元素

svg

SVG的代码都放在顶层标签<svg>中

<svg width="200" height="500" viewBox="0 0 100 250" xmlns="http://www.w3.org/2000/svg"> <circle cx="20" cy="60" r="10" fill="red" /> </svg>

讯享网

rect矩形

rect元素用来绘制矩形，6个基本属性控制位置和形状

x：矩形左上角的x位置
y：矩形左上角的y位置
width：矩形的宽度
height：矩形的高度
rx：圆角的x方位的半径
ry：圆角的y方位的半径

讯享网<rect x="10" y="10" width="30" height="30" fill="blue" stroke="orange" stroke-width="2" /> <rect x="40" y="40" rx="10" ry="10" width="30" height="30" fill="transparent" stroke="orange" stroke-width="2" />

circle圆形

circle元素用来绘制圆形，只有3个属性用来设置圆形

cx：圆心的x位置
cy：圆心的y位置
r：圆的半径

<circle cx="20" cy="60" r="10" fill="red" /> <circle cx="20" cy="60" r="10" class="view" />

class属性用来指定对应的css类。SVG的css属性和网页元素有所不同

讯享网.view { 
    fill: none; stroke: black; stroke-width: 5; }

ellipse椭圆

ellipse可以用来绘制椭圆

rx：椭圆的x半径
ry：椭圆的y半径
cx：椭圆中心的x位置
cy：椭圆中心的y位置

<ellipse cx="75" cy="85" rx="20" ry="5" fill="pink" />

line直线

line绘制直线，取两个点的位置作为属性，指定这条线的起点和终点位置

x1：起点的x位置
y1：起点的y位置
x2：终点的x位置
y2：终点的y位置

讯享网<line x1="30" x2="50" y1="90" y2="120" stroke="green" stroke-width="4" />

polyline折线

polyline是一组连接在一起的直线，可以由很多点，折线的所有点位置都放在一个points属性中。

points中每个数字用空白，逗号分隔开，每个点必须包含2个数字，一个x坐标，一个y坐标。

<polyline points="60 60, 65 35, 70 100, 75 135, 80 110, 85 115" stroke="blue" stroke-width="5" fill="transparent" />

polygon多边形

polygon和折线相似，由连接一组点集的直线组成，不同之处是，polygon的路径在最后一个点处自动回到第一个点。矩形也是多边形，可以使用多边形创建一个矩形。

讯享网<polygon points="50 165 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5" /> <polygon points="0 0, 100 0, 100 100, 0 100" />

path路径

<path>元素是SVG基本形状中最强大的一个，可以用path绘制矩形、圆形、椭圆、折线、多边形、贝塞尔曲线、2次曲线等曲线。

path元素的形状是通过属性d定义的，属性d的值是一个“命令+参数”的序列。属性d是用户坐标系统，不需要标明单位。

每个命令都有两种表示方式，易总是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位。

<path d="M 20 230 Q 40 205, 50 230 T 90230"/>

直线命令

<path>元素有5个画直线的命令，直线命令就是在两个点之间画直线

M：Move to命令，移动到。需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。假设，你的画笔当前位于一个点，在使用M命令移动画笔后，只会移动画笔，不会画线。所以，M命令常出现在路径的开始处，指明从何处开始画。

讯享网M x y 或者 m dx dy

画布中不会显示任何东西，只是将画笔移动到(10,10)坐标点

<path d="M10 10" />

L：Line to命令，绘制线，L需要两个参数，分别是一个点的x轴和y轴坐标，L命令将毁在当前位置和新位置（L前面画笔所在的点）之间画一条线段。

讯享网L x y 或者 l dx dy

简写命令，H：绘制水平线；V：绘制垂直线。这两个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它们只在坐标轴的一个方向上移动。

H x 或者 h dx V y 或者 v dy

示例：绘制矩形

讯享网<!--移动到坐标(10,10)，画水平线到90，画垂直线到90，画水平线到10，再在当前位置(0,90)到(10,10)之间画线段--> <path d="M10 10 H 90 v 90 H 10 L 10 10" />

Z：闭合命令，通过一个闭合路径命令来简化上面的path，Z命令会从当前点画一条直线到路径的起点。尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后。注意：Z命令不用区分大小写。

Z 或者 z

上面示例简写

讯享网<path d="M10 10 H 90 v 90 H 10 Z" />

也使用命令的相对坐标形式来绘制相同的图形。相对命令使用小写字母，它们的参数不是指定一个明确的坐标，而是表示相对于它前面的点需要移动多少距离。例如，用相对命令画一个90*90的正方形

<!--画笔移动到(10,10)点，由此开始，向右移动90像素构成一条水平线，然后向下移动90像素，然后向左移动90像素，最后回到起点--> <path d="M10 10 h 90 v 90 h -90 z" fill="skyblue" />

曲线命令

绘制平滑曲线的命令有3个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或圆的一部分。贝塞尔曲线的类型很多，在path元素中，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。

三次贝塞尔曲线C

需要定义一个点和两个控制点，用C命令创建三次贝塞尔曲线，需要设置三组坐标参数。

讯享网C x1 y1, x2 y2, x y 或者 c dx1 dy1, dx2 dy2, dx dy

最后一个坐标（x, y）表示的是曲线的终点，另外两个坐标是控制点，(x1, y1)是起点的控制点，(x2, y2)是终点的控制点。控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。

<path d="M10 0, C20 80, 70 10, 90 100" fill="none" stroke="orange" stroke-width="4" /> <path d="M40 40, C60 60, 80 60, 100 40" fill="none" stroke="skyblue" stroke-width="4" />

将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。

如果，一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变）。这种情况，可以使用一个简写的贝塞尔曲线命令S，如下所示：

讯享网S x2 y2, x y 或者 s dx2 dy2, dx dy

S命令可以用来创建与前面一样的贝塞尔曲线。但是，如果S命令跟在一个C命令或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点。

<path d="M10 80, C 40 10, 65 10, 95 80, S 150 150, 180 80" fill="none" stroke="skyblue" stroke-width="4" />

二次贝塞尔曲线Q

比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。需要两组参数，控制点和终点坐标。

讯享网Q x1 y1, x y 或者 q dx1 dy1, dx dy

<path d="M10 80 Q 35 10 70 80" fill="none" stroke="skyblue" stroke-width="4" />

三次贝塞尔曲线有一个S命令，二次贝塞尔曲线有一个差不多的T命令，可以通过更简短的参数，延长二次贝塞尔曲线

讯享网T x y 或者 t dx dy

T会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。注意，T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。

<path d="M10 80 Q 35 10 70 80 T 130 80" fill="none" stroke="skyblue" stroke-width="4" />

三次贝塞尔曲线C虽然有更大的自由度，但是两种曲线能达到的效果总是差不多的。具体使用哪种曲线，通常取决于需求，和对曲线对称性的依赖程度。

patterns图案

patterns图案是svg中的填充类型之一。跟渐变一样，<partterns>需要放在svg文档的<defs>内部

讯享网<svg width="200" height="500" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="linearGradient"> <stop stop-color="red" offset="0" /> <stop stop-color="blue" offset="1" /> </linearGradient> <radialGradient id="radialGradient" cx="0.25" cy="0.25" r="0.5"> <stop stop-color="pink" offset="0" /> <stop stop-color="orange" offset="1" /> </radialGradient> <pattern id="pattern" x="0" y="0" width=".25" height=".25"> <rect x="0" y="0" width="50" height="50" fill="skyblue" stroke="black" stroke-width="1" /> <rect x="0" y="0" width="25" height="25" fill="url(#linearGradient)" /> <circle cx="25" cy="25" r="20" fill="url(#radialGradient)" fill-opacity=".5" /> </pattern> </defs> <rect x="0" y="0" width="200" height="200" fill="url(#pattern)" /> </svg>

在pattern元素内部可以包含任何之前包含过的其它基本形状。pattern定义了一个单元系统以及他们的大小。在pattern元素上定义了width和height属性，用于描述在重复下一个图案之前应该跨过多远。如果你想要在绘制时偏移矩形的开始点，可以使用x和y属性。当一个值为1时，它被缩放到应用pattern对象的宽高值。因此，当我们希望pattern垂直和水平的重复4次，所以宽高被设置为0.25，这一位置pattern的宽高仅为总外框大小的0.25。

text文本

svg中有两种不同的文本模式，一种是写在图像中的文本，另一种是svg字体，这里介绍的是写在图像中的文本。

在svg文档中，<text>元素内部可以放任何文字

<text x="10" y="20">hello world</text>

属性x和属性y决定了文本在视口中显示的位置，属性text-anchor，的取值有start，middle,end，inherit，允许决定从这一点开始的文本流的方向。属性fill可以给文本填充颜色，属性stroke给文本描边，形状元素和文本元素都可以引用渐变或图案。

设置字体属性

下列每个属性可以被设置为一个svg属性或者一个css声明：

font-family，font-style，font-weight，font-variant，font-stretch，font-size，font-size-adjust，kerning，letter-spacing，word-spacing，text-decoration。

其他文本相关元素

tspan

该元素用来标记大块文本的子部分。必须是一个text元素或别的tspan元素都子元素。一个典型的用法是把句子中的一个词变样式

讯享网 <svg width="200" height="500" xmlns="http://www.w3.org/2000/svg"> <linearGradient id="linear"> <stop stop-color="red" offset="0" /> <stop stop-color="yellow" offset="1" /> </linearGradient> <text x="10" y="20" fill="url(#linear)">hello worl <tspan font-weight="bold" fill="green">d</tspan> </text> </svg>

tref

textPath

g

<g>是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素都属性会被其所有的子元素继承。g元素也可以用来定义复杂的对象，之后通过<use>元素来引用它

<g fill="red" id="myRect"> <rect x="0" y="0" width="30" height="30"></rect> <rect x="40" y="0" width="30" height="30"></rect> </g> <use href="#myRect" x="100" y="100"></use>

defs

svg允许我们定义以后需要重复使用的图形元素。建议把所有需要重复使用的引用元素定义在<defs>元素里面，增加svg内容的易读性和可访问性。在defs元素中定义的图形元素不会直接呈现，可以在任意地方利用<use>标签呈现元素。

讯享网<svg width="80px" height="30px" viewBox="0 0 80 30" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient01"> <stop offset="20%" stop-color="#39F" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient> </defs> <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)" /> </svg>

use

use元素中SVG文档内取得目标节点，并在别的地方复制它们。效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use元素的位置。

 <svg width="200" height="500" xmlns="http://www.w3.org/2000/svg"> <defs> <g id="Port"> <circle style="fill:inherit" r="20"/> </g> </defs> <use x="50" y="50" xlink:href="#Port" style="fill:blue"/> </svg>

网格