深刻理解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坐标系统是相等同的。