SVG坐标系统和transformation彻底理解

翻译自https://sarasoueidan.com/blog/svg-coordinate-systems/

SVG元素不像传统的HTML elements一样受制于css box model。这就使得position或者transform这些svg元素有些不是很直观.然而，一旦我们理解了SVG坐标体系和transformation是怎么工作的，那么操作svg就变得容易起来。本文试图解析SVG最重要的控制SVG坐标体系的三个属性: viewport, viewBox, preserveAspectRatio

SVG Canvas

canvas就是SVG内容呈现的舞台。概念上说，这个canvas在x,y方向是无限的，也就是说SVG可以是无线大尺寸的。然而，SVG内容只能渲染在相对于有限的一个区域，这个区域我们称之为viewport.所有没有落在这个viewport区域内的内容都将不可见。

the viewport

正如上面所说，viewport就是SVG可视的部分区域。你可以想象成viewport为一个窗口，通过这个窗口我们可以看到后面布景的部分内容。布景(scene)通过这个viewport可能全部或者部分可见。

SVG viewport和浏览器的viewport是类似的概念。一个web page可以是任何此存，他可以比browser viewport宽也可以长一些。

到底SVG内容是全部可见还是部分可见，这个取决于canvas的次寸大小以及preserveAspectRatio属性值。关于这一点后面还会继续研究。

你通过设置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体系中，values设置时可以带单位也可以不带unit单位。如果没有带单位意味着使用user space using user units.

待续...