SVG - 基础图形
...大约 5 分钟
SVG (Scalable Vector Graphics) 可伸缩矢量图形是一种不随放大缩小而失真的矢量图形格式
本文介绍了 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 | 闭合路径 |
提示
<polyline>(折线) 与 <polygon>(多边形) 的区别:
<polyline>(折线)不会自动闭合图形,<polygon>(多边形)会自动闭合图形
Powered by Waline v3.4.1