跳至主要內容

SVG - 基础图形

Kamimika...大约 5 分钟SVG笔记

SVG (Scalable Vector Graphics) 可伸缩矢量图形open in new window是一种不随放大缩小而失真的矢量图形格式

本文介绍了 SVG 的一些基础语法

html中使用svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"></svg>

xmlns 属性:SVG 命名空间

视口(Viewport)和视图框(ViewBox)

视口(Viewport)

属性widthheight,表示 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折线坐标(以空格分隔每个坐标,以,分隔xy
折线(未闭合)
<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折线坐标

提示

规范上:以 空格 分隔每个坐标,以,分隔xy
但实际上: 空格, 并无区别。

折线(闭合)
<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,yrx,ry椭圆半径;x-axis-rotation:旋转(弧度);large-arc-flag:劣弧0,优弧1sweep-flag:逆时针0,顺时针1x,y终点坐标
a rx,ry x-axis-rotation large-arc-flag sweep-flag dx,dyrx,ry椭圆半径;x-axis-rotation:旋转(弧度);large-arc-flag:劣弧0,优弧1sweep-flag:逆时针0,顺时针1dx,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)为终点绘制三次贝赛尔曲线
Zz闭合路径
椭圆弧large-arc-flag和sweep-flag命令图解(左上角起点,右下角终点)
椭圆弧large-arc-flag和sweep-flag命令图解(左上角起点,右下角终点)
二次贝赛尔曲线(Q/q)
二次贝赛尔曲线(Q/q)
自动平滑的二次贝赛尔曲线(T/t)
自动平滑的二次贝赛尔曲线(T/t)
三次贝赛尔曲线(C/c)
三次贝赛尔曲线(C/c)
自动平滑的三次贝赛尔曲线(S/s)
自动平滑的三次贝赛尔曲线(S/s)

提示

<polyline>(折线)<polygon>(多边形) 的区别:
<polyline>(折线)不会自动闭合图形,<polygon>(多边形)会自动闭合图形

上次编辑于:
贡献者: wzh
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.4.1