SVG视口,坐标和形状
SVG是什么
可缩放矢量图形(Scalable Vector Graphics),一种用来描述二位矢量图形的XML标记语言
SVG视口
viewport
SVG可见区域的大小,也叫画布大小
//一个栗子
<svg height="800" width="600"></svg>
单位
image.png
viewBox
SVG像是像是显示器的屏幕,xiewBox就像是截图的那个框,显示的效果就是将框中的内容全屏的显示在屏幕上.
//栗子
viewBox="0,0,50,30" //x,y,width,height
在这里,如果有viewBox的时候,那么里面的内容会相当于viewBox的百分比
preserveAspectRatio
使用它来保持viewBox的宽高比
//语法
preserveAspectRatio=[defer]<align><meetOrSlice>
//demo
<svg width="800" height="400" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" style="border:1px solid #ff0000;" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" fill="#abcdef"/>
</svg>
defer作为可选值,在image元素才会用到,使用在其他元素上会被忽略
align控制viewBox是否强制进行均匀的缩放
image.png
meetOrSlice 控制viewBox缩放的方式
meet 保持宽高比,缩放为适合viewport的大小
slice 保持宽高比,将所有不在viewport中的viewBox剪裁掉
none 不保持宽高比,缩放图像适合整个viewbox,可能会发生图像变形
坐标系统
- 世界坐标系统
- 最初坐标系统
- 用户坐标系统
- 嵌套坐标系统
- 转换坐标系统
世界坐标系统:
image.png
转换坐标系统:
SVG元素可以通过缩放,移动,倾斜和旋转来变换,类似于HTML元素使用transform来变换
transform属性
//demo
<rect width="200" height="200" fill="#abcdef" transform="translate(100)"/>
1. CSS transform也可用于SVG元素,但是IE不支持
2. 不能包含单位
3. HTML元素的偏移是相对自己的中心点,而SVG的偏移是相对SVG的左上角
4. SVG不支持3D的transform
SVG transform translate
//语法
transform="translate(<tx>[<ty>])"
image.png
SVG transform scale
//语法
transform="scale(<sx>[<sy>])"
不仅仅是宽高,坐标也发生了缩放
image.png
SVG transform skew
//语法
transform="skewX(<skew-angle>)"
transform="skewY(<skew-angle>)"
image.png
SVG形状
- 矩形<rect>
- 圆形<circle>
- 椭圆<ellipse>
- 线<line>
- 折线<polyline>
- 多边形<polygon>
- path<path>
矩形
<rect x="x" y="y" rx="rx" ry="ry" width="width" height="height"/>
rx,ry 代表圆角半径
圆形
<circle cx="cx" cy="cy" r="r"/>
cx,cy代表x,y的圆形位置
椭圆
<ellipse cx="cx" cy="cy" rx="rx" ry="ry"/>
rx,ry为椭圆的x,y半径
cx,cy为椭圆中心的x,y位置
线
<line x1="x1" y1="y1" x2="x2" y2="y2"/>
x1,y1起点
x2,y2终点
折线
<polyline points="x1 y1,x2 y2,x3 y3,...,xn yn"/>
多边形
polygon和折线很像,不同的是,polygon的路径在最后一个点处自动回到第一个点
<polygon points="x1 y1,x2 y2,x3 y3,...,xn yn"/>
路径
path元素不仅能创建其他基本形状,还能创建更多其他形状
定义属性
path元素的形状是通过属性d定义的,属性d是一个点集数列以及其他关于如何绘制路径的信息,值是一个"命令+参数"的序列
属性命令
每个命令都用一个关键字母表示,比如字母'M'表示的是'Move to'命令.每个命令都有两种表示方式:大写字母,表示绝对定位;小写字母,表示相对定位.属性d采用用户坐标系统,故不需标明单位.
直线命令
<path d="M x y L x y H x V y Z"/>
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)是终点的控制点.
<h2>三次贝塞尔曲线C命令</h2>
<svg viewBox="0 0 190 80" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="#C7000B" fill="transparent"/>
<path d="M70 10 C 70 20, 120 20, 120 10" stroke="#C7000B" fill="transparent"/>
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="#C7000B" fill="transparent"/>
<path d="M10 30 C 20 50, 40 50, 50 30" stroke="#C7000B" fill="transparent"/>
<path d="M70 30 C 70 50, 110 50, 110 30" stroke="#C7000B" fill="transparent"/>
<path d="M130 30 C 120 50, 180 50, 170 30" stroke="#C7000B" fill="transparent"/>
<path d="M10 50 C 20 80, 40 80, 50 50" stroke="#C7000B" fill="transparent"/>
<path d="M70 50 C 70 80, 110 80, 110 50" stroke="#C7000B" fill="transparent"/>
<path d="M130 50 C 120 80, 180 80, 170 50" stroke="#C7000B" fill="transparent"/>
</svg>
S x2 y2,x y (or s dx2 dy2,dx dy)
S将若干个贝塞尔曲线连接起来`
<h2>S命令</h2>
<svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="#C7000B" fill="transparent"/>
</svg>
image.png
所有控制点和起点都是相切的
二次贝塞尔曲线
Q x1 y1,x y (or q dx1 dy1,dx dy)
(x,y)表示曲线的终点,另外一个坐标(x1,y1)是控制点.只需要一个控制点,用来确定起点和终点的曲线斜率
<h2>Q命令</h2>
<svg viewBox="0 0 190 80" xmlns="http://www.w3.org/2000/svg">
<path d="M10 40 Q 95 10 180 40" stroke="#C7000B" fill="transparent"/>
</svg>
T x y(or t dx dy)
T 命令类似S命令,若干个贝塞尔曲线连接起来
<h2>T命令</h2>
<svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="#C7000B" fill="transparent"/>
</svg>
image.png
弧形
可以视为原型或椭圆的一部分
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指定弧形的终点
<h1>弧形</h1>
<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10"
stroke="#C7000B" fill="green" />
</svg>
image.png
