第二章：坐标系统

[wangmeijian]

视口

我们在<svg>标签上指定的width和height就是视口的大小，width和height的单位可以是em、ex、px、pt、pc、cm、mm、in，也可以不指定单位。

SVG坐标系统中，水平坐标（x坐标）从0开始向右递增，垂直坐标（y坐标）从0开始向下递增。

指定用户坐标

viewBox可以在<svg>坐标的基础上指定用户坐标，举个例子：给svg设置宽高都为100px，viewBox由4个数值组成，分别代表想要叠加在视口上的用户坐标系统的最小x坐标、最小y坐标、宽度和高度。

以下例子设置用户坐标宽高分别为200和400，内部有一个宽高分别为200的红色矩形。

<svg width="100" height="100" viewBox="0 0 200 400"  style="border:1px solid red;">
    <rect x="0" y="0" width="200" height="200" fill="red" />
</svg>

矩形的宽高超过了视口的宽高，按理说矩形大小大于视口的大小，从显示效果看，矩形显示的宽高为视口的一半。这是怎么回事？

知识点：svg设置了viewBox之后，内部的图形坐标使用的是用户坐标而非svg坐标！

矩形的宽为200，viewBox的宽也是200，那么矩形应该铺满视口，实际上并没有，为什么？

这里存在一个比例的问题：

视口的宽与viewBox的宽为100/200 =0.5
视口的高与viewBox的高为100/400 =0.25

矩形应该按哪个比例来计算坐标？有3种方式：

• 按较小的比例（0.25）等比缩放图形（默认情况），矩形实际显示到页面上宽高为0.25*200=50，刚好是视口的一半
• 按较大的比例（0.5）等比缩放图形并裁减掉超出视口的部分，矩形实际显示到页面上宽高为0.5*200=100，刚好铺满视口
• 宽高分别按0.5，0.25缩放图形

svg的preserveAspectRatio属性的第二个参数就是用来指定图形缩放方式的

<!-- 按较小的比例等比缩放 -->
<svg width="100" height="100" viewBox="0 0 200 400" preserveAspectRatio="xMinYMin meet" style="border:1px solid red;">
  <rect x="0" y="0" width="200" height="200" fill="red" />
</svg>
<!-- 按较大的比例等比缩放 -->
<svg width="100" height="100" viewBox="0 0 200 400" preserveAspectRatio="xMinYMin slice" style="border:1px solid red;">
  <rect x="0" y="0" width="200" height="200" fill="red" />
</svg>
<!-- 分别按宽高比例缩放 -->
<svg width="100" height="100" viewBox="0 0 200 400" preserveAspectRatio="none" style="border:1px solid red;">
  <rect x="0" y="0" width="200" height="200" fill="red" />
</svg>

preserveAspectRatio的第一个参数xMinYMin是图形相对视口的对齐方式，表示按x轴左对齐，y轴上对齐，其它还有：
xMid：x轴居中对齐
xMax：x轴右对齐
YMid：y轴居中对齐，注意Y是大写
YMax：y轴下对齐，注意Y是大写

第三章：【基本形状】