SVG Shapes & Paths API Reference

`SVG Elements`

10 methods

SVG 元素参考,涵盖矢量图形绘制与文本分组相关元素。

<svg>

SVG 根容器元素,作为所有矢量图形的画布。

Parameters

Name	Type	Description
viewBox	string	视口坐标系:min-x min-y width height
width	string	画布宽度(如 100、100px)
height	string	画布高度

Returns

渲染为可缩放的矢量画布,内部图形按 viewBox 坐标系绘制。

Example

svg

<svg viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="tomato" />
</svg>

<rect>

矩形元素,绘制矩形或圆角矩形。

Parameters

Name	Type	Description
x	number	左上角 x 坐标
y	number	左上角 y 坐标
width	number	矩形宽度
height	number	矩形高度
rx	number	圆角半径(可选)

Returns

在画布上渲染一个矩形图形。

Example

svg

<rect x="10" y="10" width="80" height="50" rx="8" fill="#4caf50" />

<circle>

圆形元素,以圆心和半径绘制圆形。

Parameters

Name	Type	Description
cx	number	圆心 x 坐标
cy	number	圆心 y 坐标
r	number	圆的半径

Returns

在画布上渲染一个圆形图形。

Example

svg

<circle cx="50" cy="50" r="20" stroke="black" fill="transparent" />

<ellipse>

椭圆元素,以圆心和两个半径绘制椭圆。

Parameters

Name	Type	Description
cx	number	圆心 x 坐标
cy	number	圆心 y 坐标
rx	number	水平半径
ry	number	垂直半径

Returns

在画布上渲染一个椭圆图形。

Example

svg

<ellipse cx="50" cy="50" rx="40" ry="20" fill="#ffcc00" />

<line>

直线元素,绘制两点之间的直线段。

Parameters

Name	Type	Description
x1	number	起点 x 坐标
y1	number	起点 y 坐标
x2	number	终点 x 坐标
y2	number	终点 y 坐标

Returns

在画布上渲染一条直线段。

Example

svg

<line x1="0" y1="0" x2="100" y2="100" stroke="#333" stroke-width="2" />

<polyline>

折线元素,按点序列绘制相连的开放直线段。

Parameters

Name	Type	Description
points	string	点序列,如 'x1,y1 x2,y2 ...'

Returns

在画布上渲染一条不闭合的折线。

Example

svg

<polyline points="0,0 50,50 100,0 150,50" fill="none" stroke="blue" />

<polygon>

多边形元素,按点序列绘制闭合的填充形状。

Parameters

Name	Type	Description
points	string	点序列,自动闭合首尾

Returns

在画布上渲染一个闭合的填充多边形。

Example

svg

<polygon points="50,5 100,100 0,100" fill="#e91e63" />

<path>

路径元素,通过命令序列绘制任意形状。

Parameters

Name	Type	Description
d	string	路径命令:M(移动) L(直线) C(三次贝塞尔) Q(二次贝塞尔) A(圆弧) H(水平) V(垂直) Z(闭合)

Returns

在画布上渲染由命令序列定义的复杂矢量形状。

Example

svg

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

<text>

文本元素,在 SVG 中绘制矢量文字。

Parameters

Name	Type	Description
x	number	文本起点 x 坐标
y	number	文本基线 y 坐标
font-size	number	字号大小

Returns

在画布上渲染矢量文字。

Example

svg

<text x="10" y="40" font-size="20" fill="#333">Hello SVG</text>

<g>

分组元素,将多个图形逻辑分组,并对组应用共享属性(如 transform)。

Returns

渲染为透明容器,子元素继承组的属性与变换。

Example

svg

<g transform="translate(10,10)" stroke="red" fill="none">
  <rect x="0" y="0" width="50" height="50" />
  <circle cx="25" cy="25" r="10" />
</g>

All references