svg html 坐标转换,SVG视口,坐标和形状

SVG是什么

可缩放矢量图形(Scalable Vector Graphics),一种用来描述二位矢量图形的XML标记语言

SVG视口

viewport

SVG可见区域的大小,也叫画布大小

//一个栗子

单位

image.png

viewBox

SVG像是像是显示器的屏幕,xiewBox就像是截图的那个框,显示的效果就是将框中的内容全屏的显示在屏幕上.

//栗子

viewBox="0,0,50,30" //x,y,width,height

在这里,如果有viewBox的时候,那么里面的内容会相当于viewBox的百分比

preserveAspectRatio

使用它来保持viewBox的宽高比

//语法

preserveAspectRatio=[defer]

//demo

defer作为可选值,在image元素才会用到,使用在其他元素上会被忽略

align控制viewBox是否强制进行均匀的缩放

image.png

meetOrSlice 控制viewBox缩放的方式

meet 保持宽高比,缩放为适合viewport的大小

slice 保持宽高比,将所有不在viewport中的viewBox剪裁掉

none 不保持宽高比,缩放图像适合整个viewbox,可能会发生图像变形

坐标系统

世界坐标系统

最初坐标系统

用户坐标系统

嵌套坐标系统

转换坐标系统

世界坐标系统:

image.png

转换坐标系统:

SVG元素可以通过缩放,移动,倾斜和旋转来变换,类似于HTML元素使用transform来变换

transform属性

//demo

1. CSS transform也可用于SVG元素,但是IE不支持

2. 不能包含单位

3. HTML元素的偏移是相对自己的中心点,而SVG的偏移是相对SVG的左上角

4. SVG不支持3D的transform

SVG transform translate

//语法

transform="translate([])"

image.png

SVG transform scale

//语法

transform="scale([])"

不仅仅是宽高,坐标也发生了缩放

image.png

SVG transform skew

//语法

transform="skewX()"

transform="skewY()"

image.png

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命令

image.png

所有控制点和起点都是相切的

二次贝塞尔曲线

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命令

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指定弧形的终点

弧形

stroke="#C7000B" fill="green" />

image.png