SVG坐标系统和transformation彻底理解
来源:互联网 发布:ipad提示无法加入网络 编辑:程序博客网 时间:2024/06/08 15:51
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坐标体系和transformations- viewport, viewBox,preserveAspectRatio
- 理解SVG transform坐标变换
- SVG坐标系统与坐标转换
- SVG坐标系统与坐标转换
- 坐标系统变换(Coordinate System Transformation)
- canvas与svg中的坐标系统
- SVG坐标系统及图形变换
- 系统调用彻底理解
- 系统调用彻底理解
- svg 坐标
- QT 坐标系统理解
- svg基础 4 坐标和变换
- SVG——坐标系统的变换整合
- 理解Cocos2d-x坐标系统
- 彻底理解position和anchorPoint!!!
- svg 坐标换算
- 何时需要做urlEncode,以及为什么要做
- 机器人行业分析
- html,css,javascript角色划分
- iOS下的界面布局利器-MyLayout布局框架
- node.js学习笔记之HTTP客户端
- SVG坐标系统和transformation彻底理解
- vuejs plus d3
- styling the SVG images
- 参照安卓计算CRC16校验码的方法获取Objective-C的CRC16位校验码
- 场景异步加载显示加载界面
- hihocoder1543(思维+ 二分)
- 古老的CSS同高列问题
- base64编码以及url safe base64是怎么工作的?
- 免费杀毒软件卡巴斯基安装