第 3 章 坐标系统
视口
文档使用的画布区域称为视口，即 <svg> 元素。可通过 width 和 height 属性确定视口的大小。其取值如下
- 纯数字：该数字会被当做用户坐标系的像素
- 百分比：当
<svg>为根元素时，根据窗口计算，当嵌套时，根据父元素计算 - 带单位：与常规的
CSS单位一致em：默认字体的大小，通常相当于文本行高ex：字母x的高度px：像素pt：点（1/72 英寸）pc：12 点（1/6 英寸）cm：厘米mm：毫米in：英寸
使用默认用户坐标
坐标原点在左上角，向右及向下为正
- 在
<svg>元素中没有指定单位，也可以在某些形状元素中指定单位 - 在
<svg>元素中指定单位，并不会影响其他元素中没有给定单位的坐标
为视口指定用户坐标
通过 <svg> 元素上的 viewBox 属性指定，其属性值由 4 个数值组成，分别代表想要叠加在视口上的用户坐标系统的：最小 x 坐标、最小 y 坐标、宽度、高度
因此要在 4cm * 5cm 的图纸上设置一个每厘米 16 个单位的坐标系统，要使用以下标记：
<svg width="4cm" height="5cm" viewBox="0 0 64 80"></svg>
上面代码表示：要铺满 4cm 的宽度，形状元素的宽度需要指定为 64（不带单位，若带了单位则按照单位计算）
保留宽高比
当视口的宽高比和 viewBox 不一样时，需要做相应处理
- 按较小的尺寸等比例缩放图形，以使图形完全填充视口。此时需要指定图片的位置
- 按较大的尺寸等比例缩放图形，并裁剪掉超出视口的部分。此时需要指定图片的裁剪区域
- 拉伸和挤压绘图以使其恰好填充新的视口（即不保留宽高比）
为 preserveAspectRatio 指定对齐方式
用以指定被缩放的图像相对视口的对齐方式，以及是希望它适配边缘还是裁剪，语法如下
preserveAspectRatio="<align> <meetOrSlice>"
<align> 取值如下
- none：不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形（注意：如果
<align>的值是none，则<meetOrSlice>属性的值将会被忽略。） - 其他值：见下表
| y 对齐 | x 对齐 | ||
|---|---|---|---|
| yMin （按视口顶部边缘， viewBox 最小 y 值对齐） | xMin （按视口左侧边缘， viewBox 最小 x 值对齐） | xMid （按视口水平中心， viewBox 中点 x 值对齐） | xMax （按视口右侧边缘， viewBox 最大 x 值对齐） |
| yMid （按视口垂直中心， viewBox 中点 y 值对齐） | xMinYMid | xMidYMid（默认值） | xMaxYMid |
| yMax （按视口底部边缘， viewBox 最大 y 值对齐） | xMinYMax | xMidYMax | xMaxYMax |
<meetOrSlice> 取值如下
- meet：默认值 若宽高比不一致，此时
viewBox比视口小。 图像将缩放到- 保留宽高比
- 整个
SVG的viewBox在试图范围内是可见的 - 尽可能的放大
SVG的viewBox，同时仍然满足其他的条件
- slice： 若宽高比不一致，此时
viewBox比视口大。图像将缩放到- 保留宽高比
- 整个视口将覆盖
viewBox - 尽可能的缩小
SVG的viewBox，同时仍然符合其他标准
对齐方式与 meet 组合示例如下
对齐方式与 slice 组合示例如下
使用 none 属性值 示例如下
嵌套坐标系统
可以在任何时候将另一个 <svg> 元素插入到文档中来建立新的视口和坐标系统。步骤如下
- 绘制蓝色的矩形
- 为每个矩形定义一个带有对应
preserveAspectRatio属性的新<svg>元素 - 使用
<use>绘制，并让SVG做其他工作