SVG|学习SVG（二）坐标系统前端|SVG|学习

简介 【SVG|学习SVG（二）坐标系统】SVG是用于绘图的，那么它和其他绘图技术一样都是有网格坐标系统。坐标系简介：

以左上角为坐标系的原点(0,0)。
X 轴的正方向向右，Y 轴的正方向向下。
坐标轴以像数为单位。

viewport 视口

视口是指文档在HTML使用的画布区域。
由 width、height 属性确定视口的大小。如果 SVG 元素不声明 viewport，浏览器会默认给定视口的大小 300px * 150px。

version="1.1" xmlns="http://www.w3.org/2000/svg" baseProfile="full"> 你好

文章图片

viewbox

画布中的可视区。简单理解就是只在视口中绘制可视区范围内的内容。
viewBox 接收四个参数值，分别是 min-x，min-y，width，height。min-x 和 min-y 设置可视区在视口中的位置(可视区的左上角)，width 和 height 设置可视区的宽和高。注意 width 或 height 如果设置成 0 ，就代表没有可视区。
初始viewBox的范围和viewport完全相同。

示例，设置viewBox="0 0 100 100"。

version="1.1" xmlns="http://www.w3.org/2000/svg" baseProfile="full" width="300" height="200" viewBox="0 0 100 100" > 你好

文章图片

创建了0 0 100 100的可视区。视口中只展示了我们设置的可视区的内容。
区域自动缩放，以适应视口。

preserveAspectRatio

控制缩放图形相对视口的对齐方式。

preserveAspectRatio = ?

align 有9种值：

y\x	xMin	xMid	xMax
yMin	xMinYMin	xMidYMin	xMaxYMin
yMid	xMinYMid	xMidYMid	xMaxYMid
yMax	xMinYMax	xMidYMax	xMaxYMax

none, 通过拉伸 viewBox 来适应整个视窗，不管宽高比。
xMin, viewBox 和 viewport 左边缘对齐。
xMid, viewBox 和 viewport x 轴中心对齐。
xMax, viewBox 和 viewport 右边缘对齐。
YMin, viewBox 和 viewport 上边缘对齐。
YMid, viewBox 和 viewport y 轴中心对齐。
YMax, viewBox 和 viewport 下边缘对齐。

meetOrSlice 常用值：

meet 宽高比将会被保留，尽可能的放大填满。类似于 background-size: contain。
slice 宽高比将会被保留，比例小的方向放大填满。类似于 background-size: cover。

version="1.1" xmlns="http://www.w3.org/2000/svg" baseProfile="full" width="300" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMinYMid slice" > 你好