SVG

SVG视口

viewport
viewBox
preserveAspectRatio

viewport
viewport
SVG可见区域的大小，或者可以想象成舞台大小，画布大小。
Coding
<svg width="800" height="600" style="boder:1px solid #000"></svg>

viewBox
视区盒子
SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现
就是把框框中的截屏内容再次在显示器中全屏显示！
语法
viewBox="x, y, width, height"
// x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

</svg>

preserveAspectRatio
preserveAspectRatio属性
使用preserveAspectRatio属性来让viewBox保持宽高比
语法
preserveAspectRatio=[defer] <align-x> <meetOrSlice>
defer
defer参数是可选值，它仅仅在image元素上应用preserveAspectRatio
属性时才使用。在使用其它元素时会被忽略。

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

取值	描述
xMin	viewBox的最小X值对齐viewport的左边部
xMid	viewBox的X轴中点对齐viewport的X轴中点
xMax	viewBox的最大X值对齐viewport的右边部
YMin	viewBox的最小Y值对齐viewport的顶边
YMid	viewBox的Y轴中点对齐viewport的Y轴中点
YMax	viewBox的最大Y值对齐viewport的底边

align参数的3×3种个组合取值

取值	描述	类比
xMinYMin	viewBox的<min-x>对齐viewport的最小X值，min-y对齐viewport的最小Y值	backrgound-position:0% 0%;
xMinYMid	viewBox的<min-x>对齐viewport的最小X值，viewBox的Y轴中点对齐viewport的Y轴中点	backrgound-position:0% 50%
xMinYMax	viewBox 的 <min-x> 对齐 viewport 的最小 X 值， min- y+<height>对齐viewport的最大Y值	backrgound-position:0% 100%;
xMidYMin	viewBox的X轴中点对齐viewport的X轴中点，min-y对齐viewport的最小Y值	viewport的最小Y值backrgound-position:50% 0%;
xMidYMid （默认值）	vviewBox的X轴中点对齐viewport的X轴中点，viewBox的Y轴中点对齐viewport的Y轴中点	backrgound-position:50% 50%;
xMidYMax	viewBox 的 X 轴中点对齐 viewport 的 X 轴中点， min-y+<height>对齐viewport的最大Y值	backrgound-position:50% 100%
xMaxYMin	viewBox的<min-x>+<width>对齐viewportX轴的最大值，min-y对齐viewport的最小Y值	backrgound-position:100% 0%;
xMaxYMid	viewBox的<min-x>+<width>对齐viewportX轴的最大值，viewBox的Y轴中点对齐viewport的Y轴中点	backrgound-position:100% 50%;
xMaxYMax	viewBox的<min-x>+<width>对齐viewportX轴的最大值，min-y+<height>对齐viewport的最大Y值	backrgound-position:100% 100%

meetOrSlice参数
通俗来说，该参数控制viewBox缩放的方式。

取值	描述
meet	保持宽高比并将viewBox缩放为适合viewport的大小
slice	保持宽高比并将所有不在viewport中的viewBox剪裁掉
none	不保存宽高比。缩放图像适合整个viewbox，可能会发生图像变形

SVG形状

矩形 <rect>

<rect>
rect元素会在屏幕上绘制一个矩形。
Coding
<rect x="x" y="y" rx="rx" ry="ry" width="width" height="height" />
基本属性
x:矩形左上角的x位置；y:矩形左上角的y位置；width:矩形的宽度；height:矩形的高度；
rx:圆角的x方位的半径，默认为0；ry:圆角的y方位的半径，默认为0。

圆形 <circle>

<circle>
circle元素会在屏幕上绘制一个圆形。
Coding
<circle cx="cx" cy="cy" r="r" />
基本属性
r:圆的半径；
cx:圆心的x位置；
cy:圆心的y位置。

椭圆 <ellipse>

<ellipse>
Ellipse是circle元素更通用的形式，可以分别缩放圆的x半径和y半径。
Coding
<ellipse cx="cx" cy="cy" rx="rx" ry="ry" />
基本属性
rx:椭圆的x半径；ry:椭圆的y半径；
cx:椭圆中心的x位置；cy:椭圆中心的y位置。

线 <line>
<line>
Line 绘制直线。
Coding
<line x1="x1" y1="y1" x2="x2" y2="y2" />
基本属性
x1:起点的x位置；y1:起点的y位置；
x2:终点的x位置；y2:终点的y位置。

折线 <polyline>
<polyline>
Polyline是一组连接在一起的直线。
Coding
<polyline points="x1 y1, x2 y2, x3 y3, x4 y4, … , xn yn" />
points
点集数列，每个数字用空白符、逗号、终止命令或者换行符分隔开；
每个点必须包含2个数字，一个是x坐标，一个是y坐标。

多边形 <polygon>

<polygon>
polygon和折线很像，不同的是，polygon的路径在最后一个点处自动回到第一个点。
Coding
<polygon points="x1 y1, x2 y2, x3 y3, x4 y4, … , xn yn" />
points
点集数列，每个数字用空白符、逗号、终止命令或者换行符分隔开；
每个点必须包含2个数字，一个是x坐标，一个是y坐标；
路径绘制完后闭合图形，形成一个闭合的多边形。

路径 <path>

<path>
<path>元素不仅能创建其他基本形状，还能创建更多其他形状。
定义属性
path元素的形状是通过属性d定义的，属性d是一个点集数列以及其它关于如何绘制
路径的信息，值是一个“命令+参数”的序列。
属性命令
每个命令都用一个关键字母表示，比如字母“M”表示的是“Move to”命令。
每个命令都有两种表示方式：大写字母，表示绝对定位；小写字母，表示相对定位。
属性d采用用户坐标系统，故不需标明单位。

直线命令
命令定义
顾名思义，直线命令就是在两个点之间画直线。
Coding
<path d="M x y L x y H x V y Z" />
<path d="m dx dy l dx dy h dx v dy 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 l dx dy)
“Line to”命令，会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。
L x y表示从L命令之前的点到（x，y）点之间画一条线段；
l dx dy表示在从l命令之前的点到相对向右dx像素向下dy像素的点之间画一条线段。

H x (or h dx)
绘制水平线。H x表示绘制到x轴上的x点位置；h dx表示向右绘制dx像素。

V y (or v dy)
绘制垂直线。V y表示绘制到y轴上的y点位置；v dy表示向下绘制dy像素。

Z (or z)
闭合路径命令。从当前点画一条直线到路径的起点，不区分大小写。

曲线命令
命令定义
绘制平滑曲线的命令分为贝塞尔曲线和弧形两种。
贝塞尔曲线
应用于二维图形应用程序的数学曲线。
贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋。
在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。
弧形
基本上，弧形可以视为圆形或椭圆形的一部分。

三次贝塞尔曲线

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
最后一个坐标(x,y)表示曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。控制点描述曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。

S x2 y2, x y (or s dx2 dy2, dx dy)
S命令用于将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。
若S命令跟在C命令或另一个S命令后面，它第一个控制点，会被假设成前一个控制点的对称点。
若S命令单独使用，前面没有C命令或S命令，那它的两个控制点就会被假设为同一个点。
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="#C7000B" fill="transparent"/>

二次贝塞尔曲线

Q x1 y1, x y (or q dx1 dy1, dx dy)
最后一个坐标(x,y)表示曲线的终点，另外一个坐标（x1，y1）是控制点。
只需要一个控制点，用来确定起点和终点的曲线斜率。

T x y (or t dx dy)
T命令类似S命令，用于将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。
和之前一样，快捷命令T会通过前一个控制点，推断出一个新的控制点。
若T单独使用，那控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="#C7000B" fill="transparent"/>

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

posted @ 2018-11-23 16:51 键1234 阅读(242) 评论(0) 编辑收藏举报

指间灵动，快码加编

刷新页面返回顶部

键1234

SVG

公告