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.
待续...
SVG坐标系统和transformation彻底理解的更多相关文章
- 理解SVG坐标系统和变换: transform属性
SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...
- 理解SVG坐标系统和变换: 建立新视窗
在SVG绘制的任何一个时刻,你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系.在这篇文章中,我们将看一下我们如何这样做,以及这样 ...
- 理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio
SVG元素不像HTML元素一样由CSS盒模型管理.这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观.然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义.本篇文章中我 ...
- 2. svg学习笔记-svg中的坐标系统和viewbox
我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...
- SVG中的坐标系统和坐标变换
视野和世界 2D绘图中很多人会有一个误区,就是我绘图的区域是一个矩形区域.无论新建一个画布还是创建了一个容器,心里都想象里面有一个矩形区域.其实,在SVG当中,矩形区域只是视野,是我们看到的部分.实际 ...
- svg坐标系变换
svg的坐标变换有三个属性来决定:viewport, viewBox, 和 preserveAspectRatio,我发现三篇比较详细的博客,转载如下: 理解SVG坐标系和变换:视窗,viewBox和 ...
- Cocoa中层(layer)坐标系的极简理解
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) Cocoa层的坐标系一直理解的不清晰,现在把它整理总结一下: ...
- unreal3的坐标系统和vector/rotator
unreal3的坐标系有点奇葩,属于[z轴向上的左手坐标系]: 1.左手食指指前方,x正向 2.大拇指指上方,z正向 3.中指指右方,y正向 若以我们人头摆正时来参考: 1.目视的是前方,x正向 2. ...
- pyqt5-QWidget坐标系统和大小
获取坐标和尺寸: 坐标的获取视频教程:https://v.qq.com/x/page/t085892mzh9.html x() y() 返回控件的坐标 相对于父控件的坐标(窗口框架左上角) ...
随机推荐
- Linux下which命令使用详解(转)
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which 查看可执行文件的位置. whereis 查看文件的位置. locate 配合数据库查看文件位置. f ...
- 用python开发了一个简单apache web服务端范例,在win10 + apache2.4.9 + python3.5 测试成功
#!D:\Programs\Python\Python35-32\python.exe import cgi def htmlTop(): print("Content-type: ...
- (转) Linux 内核运行参数修改——sysctl命令
原文:https://blog.csdn.net/u012707739/article/details/78254241 sysctl命令被用于在内核运行时动态地修改内核的运行参数,可用的内核参数在目 ...
- (转)AIX的SVMON命令详解
原文:http://czmmiao.iteye.com/blog/1153499 svmon概述 svmon 命令用于显示当前内存状态的信息,可通过 # lslpp bos.perf.tools 查看 ...
- JavaScript设计模式(三) - 策略模式
什么是策略模式? 策略模式支持在运行时由使用者选择合适的算法,对于使用者而言不用关心背后的具体实现,由使用者自动根据当前程序执行的上下文和配置,从已有的算法列列表中选择出合适的算法来处理当前任务. ...
- jQuery多库共存问题解决方法
一.问题概述: 1.随着jQuery的流行,采用jQuery和$符为命名空间的js库越来越多,当然jQuery的$符也是参照的Prototype库的,所以当多个库同时以$符或者jQuery为命名空间时 ...
- 判断checkbox是否被选中
jquery判断checked的三种方法: .attr('checked): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false .prop( ...
- 快速创建SpringBoot+SSM解析
此处使用IDEA快速搭建SpringBoot应用,首先用SpringBoot搭建WEB工程: 然后点击Next生成项目,首次生成可能有点慢,下次创建的时候就会快很多,生成后的目录结构如下: 我们更改下 ...
- Kubernetes是什么
目录 简介 主要概念: 总体结构 参考 Kubernetes概念 简介 kubernetes是一个Google开源的容器编排系统,用于自动部署,扩展和管理容器化应用程序. 随处运行:支持公有云,私有云 ...
- [PY3]——字符串的分割、匹配、搜索方法总结
?分割.匹配.搜索时可以用到什么样的解决方法? 分割方法总结 1. str.split( ) * 分割字符串 * 返回列表 s1='I love python' # 默认以空格为界定符,且多个空格都当 ...