SVG坐标系统和transformation彻底理解
2017-07-31 10:36
190 查看
翻译自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 viewport和浏览器的viewport是类似的概念。一个web page可以是任何此存,他可以比browser viewport宽也可以长一些。
到底SVG内容是全部可见还是部分可见,这个取决于canvas的次寸大小以及preserveAspectRatio属性值。关于这一点后面还会继续研究。
你通过设置svg元素的width/height两个属性值来指定viewport的大小
在SVG体系中,values设置时可以带单位也可以不带unit单位。如果没有带单位意味着使用user space using user units.
待续...
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.
待续...
相关文章推荐
- SVG坐标系统和transformation彻底理解
- 理解SVG坐标系统和变换: transform属性
- 理解SVG坐标系统和变换: 建立新视窗
- 理解SVG坐标系统和变换: transform属性
- 理解SVG坐标系统和变换: transform属性
- 理解SVG坐标系统和变换: 建立新视窗
- 理解SVG坐标系统和变换: transform属性
- SVG系列教程:坐标系统
- 理解Cocos2d-x坐标系统
- SVG坐标系统
- 使用AxisHelper帮助理解View and Data API中的坐标系统
- [Oracle]彻底理解SQL*Plus 系统变量
- 系统调用彻底理解
- canvas与svg中的坐标系统
- 【翻译svg教程 】svg 的坐标系统
- SVG坐标系统及图形变换
- SVG坐标系统与坐标转换
- SVG坐标系统与坐标转换
- opengl坐标系统及绘图流程理解
- 彻底理解Toast原理和解决小米MIUI系统上没法弹Toast的问题