深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio

本文翻译自blog:

https://www.sarasoueidan.com/blog/svg-coordinate-systems/

SVG元素不像其他HTML元素一样受css盒子模型所制约。这个特点导致transform和postioning svg元素显得有些神秘，并且初看起来不是那么浅显易懂。然而，一旦你理解了SVG坐标体系以及transformation是如何工作的，那么操作SVG会变得非常简单。本文中，我们将涵盖控制SVG坐标体系的三个方面内容：viewport, viewBox和preserveAspectRatio

这是包含三篇文章系列中的第一篇：

• 理解SVG坐标体系和transformations:就是本文
• 理解svg坐标体系和transformations: transform属性
• 理解svg坐标体系和transformations: 建立新的viewports

和本文相对应的live demo:

https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/

SVG Canvas

canvas是SVG内容呈现的区域。概念上说，这个canvas在两个纬度都是无穷大的。也就是说SVG可以为任何次寸。然而，SVG内容只能在有限的screen上（这就是一个有限的区域，并被称为viewport），也就是viewport上显示。SVG中落在这个viewport范围之外的内容将被clipped off并且不可见。

viewport

viewport就是SVG可见的那部分区域。你可以把viewport想象为一扇窗户，通过这个窗户你可就可以看到一个特定区域的风景(SVG部分内容).而这个风景(SVG内容)通过这扇窗户可以全部或者部分地可见。

SVG viewport和浏览器的viewport是类似的。一个web page可以是任何次寸大小，它可以比浏览器的viewport的宽度大，也可以比浏览器viewport的高度高。然而在同一时刻，我们只能看到web page的一部分（就是通过这个viewport)

是整个SVG canvas是否可见，还是仅部分canvas可见这个取决于size of that canvas乘于preserveAspectRation属性的值

你可以通过设定最外层的svg元素的width和height属性来指定这个viewport的次寸大小。

<!-- the viewport will be 800px by 600px -->
<svg width="800" height="600">
    <!-- SVG content drawn onto the SVG canvas -->
</svg>

在SVG概念里，属性的值可以有也可以没有对应的单位。A unitless value is said to be specified in user space using user units.如果值被指定为user units,那么这个值就假设为具有"px"单位的值。这意味着上面的例子中我们就指定了viewport为800pxX600px的区域。

你也可以指定对应的单位，在SVG中支持的单位有:em,ex,px,pt,pc,cm,mm,in和百分比。

一旦最外层的SVG元素的width和height被指定了，浏览器将会建立一个initial viewport coordinate system和一个initial user coordinate system.

the initial coordinate system

初始的viewport coordinate system是建立在viewport之上的坐标体系，从viewport左上角(0,0)点开始，正的x-轴往右生长，

正的y-轴向下生长initial coordinate system中的1个单位等于viewport中的一个"pixel".这个坐标体系和通过css盒子模型建立起来的html坐标体系是类似的。

the initial user coordinate system则是在SVG canvas上建立起来的坐标系统。这个坐标系统初始化时是和viewport坐标系统是相等同的。