SVG是什么
可缩放矢量图形(Scalable Vector Graphics),一种用来描述二位矢量图形的XML标记语言
SVG视口
viewport
SVG可见区域的大小,也叫画布大小
//一个栗子
单位
viewBox
SVG像是像是显示器的屏幕,xiewBox就像是截图的那个框,显示的效果就是将框中的内容全屏的显示在屏幕上.
//栗子
viewBox="0,0,50,30" //x,y,width,height
在这里,如果有viewBox的时候,那么里面的内容会相当于viewBox的百分比
preserveAspectRatio
使用它来保持viewBox的宽高比
//语法
preserveAspectRatio=[defer]
//demo
defer作为可选值,在image元素才会用到,使用在其他元素上会被忽略
align控制viewBox是否强制进行均匀的缩放
meetOrSlice 控制viewBox缩放的方式
meet 保持宽高比,缩放为适合viewport的大小
slice 保持宽高比,将所有不在viewport中的viewBox剪裁掉
none 不保持宽高比,缩放图像适合整个viewbox,可能会发生图像变形
坐标系统
- 世界坐标系统
- 最初坐标系统
- 用户坐标系统
- 嵌套坐标系统
- 转换坐标系统
世界坐标系统:
转换坐标系统:
SVG元素可以通过缩放,移动,倾斜和旋转来变换,类似于HTML元素使用transform来变换
transform属性
//demo
1. CSS transform也可用于SVG元素,但是IE不支持
2. 不能包含单位
3. HTML元素的偏移是相对自己的中心点,而SVG的偏移是相对SVG的左上角
4. SVG不支持3D的transform
SVG transform translate
//语法
transform="translate([])"
SVG transform scale
//语法
transform="scale([])"
不仅仅是宽高,坐标也发生了缩放
SVG transform skew
//语法
transform="skewX()"
transform="skewY()"
SVG形状
- 矩形
- 圆形
- 椭圆
- 线
- 折线
- 多边形
- path
矩形
rx,ry 代表圆角半径
圆形
cx,cy代表x,y的圆形位置
椭圆
rx,ry为椭圆的x,y半径
cx,cy为椭圆中心的x,y位置
线
x1,y1起点
x2,y2终点
折线
多边形
polygon和折线很像,不同的是,polygon的路径在最后一个点处自动回到第一个点
路径
path元素不仅能创建其他基本形状,还能创建更多其他形状
定义属性
path元素的形状是通过属性d定义的,属性d是一个点集数列以及其他关于如何绘制路径的信息,值是一个"命令+参数"的序列
属性命令
每个命令都用一个关键字母表示,比如字母'M'表示的是'Move to'命令.每个命令都有两种表示方式:大写字母,表示绝对定位;小写字母,表示相对定位.属性d采用用户坐标系统,故不需标明单位.
直线命令
M x y(or m dx dy)
"Move to"命令,M作为路径的开始处,指明路径的开始位置.
M x y表示需要将画笔移动到(x,y)位置
m dx dy表示需要将画笔向右边移动dx像素,向下移动dy像素
L x y(or | dx dy)
"Line to"命令,会在当前位置和新位置(L前面画笔所在的点)之间画一条线段.
L x y 表示从L命令之前的点到(x,y)点之间画一条线段.
l dx dx表示从l命令之前的点到相对向右dx像素向下dy像素的点之间画一条线段.
H x (or h dx)
绘制水平线.H x表示绘制到x轴上的x点位置.h dx表示向右绘制dx像素.
V y (or v dy)
绘制垂直线.V x表示绘制到y轴上的y点位置.v dy表示向下绘制dy像素.
Z (or z)
闭合路径命令.从当前点画一条直线到路径的起点,不区分大小写.
曲线命令
命令定义
绘制平滑曲线的命令分为贝塞尔曲线和弧形两种
贝塞尔曲线
贝塞尔曲线由线段和节点组成,节点是可拖动的指点,线段像是可伸缩的皮筋.在path元素里,只存在两种贝塞尔曲线:三次贝塞尔曲线C,两次贝塞尔曲线Q
三次贝塞尔曲线
C x1 y1,x2 y2,x y (of c dx1 dy1,dx2 dy2,dx dy)
(x,y)表示曲线的终点,另外两个坐标是控制点,(x1,y1)是起点的控制点,(x2,y2)是终点的控制点.
三次贝塞尔曲线C命令
S x2 y2,x y (or s dx2 dy2,dx dy)
S将若干个贝塞尔曲线连接起来`
S命令
所有控制点和起点都是相切的
二次贝塞尔曲线
Q x1 y1,x y (or q dx1 dy1,dx dy)
(x,y)表示曲线的终点,另外一个坐标(x1,y1)是控制点.只需要一个控制点,用来确定起点和终点的曲线斜率
Q命令
T x y(or t dx dy)
T 命令类似S命令,若干个贝塞尔曲线连接起来
T命令
弧形
可以视为原型或椭圆的一部分
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
参数说明:
rx,ry分别是椭圆的x,y轴半径
x-axis-rotation决定椭圆的旋转角度,默认角度deg,正方形为顺时针
large-arc-flag决定弧线是大于还是小于180度,0表示小角弧,1表示大角弧
sweep-flag表示弧线方向,0表示从起点到终点沿逆时针画弧,1表示沿顺时针画弧
x,y指定弧形的终点
弧形
