翻译自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彻底理解的更多相关文章

  1. 理解SVG坐标系统和变换: transform属性

    SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...

  2. 理解SVG坐标系统和变换: 建立新视窗

    在SVG绘制的任何一个时刻,你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系.在这篇文章中,我们将看一下我们如何这样做,以及这样 ...

  3. 理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio

    SVG元素不像HTML元素一样由CSS盒模型管理.这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观.然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义.本篇文章中我 ...

  4. 2. svg学习笔记-svg中的坐标系统和viewbox

    我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...

  5. SVG中的坐标系统和坐标变换

    视野和世界 2D绘图中很多人会有一个误区,就是我绘图的区域是一个矩形区域.无论新建一个画布还是创建了一个容器,心里都想象里面有一个矩形区域.其实,在SVG当中,矩形区域只是视野,是我们看到的部分.实际 ...

  6. svg坐标系变换

    svg的坐标变换有三个属性来决定:viewport, viewBox, 和 preserveAspectRatio,我发现三篇比较详细的博客,转载如下: 理解SVG坐标系和变换:视窗,viewBox和 ...

  7. Cocoa中层(layer)坐标系的极简理解

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) Cocoa层的坐标系一直理解的不清晰,现在把它整理总结一下: ...

  8. unreal3的坐标系统和vector/rotator

    unreal3的坐标系有点奇葩,属于[z轴向上的左手坐标系]: 1.左手食指指前方,x正向 2.大拇指指上方,z正向 3.中指指右方,y正向 若以我们人头摆正时来参考: 1.目视的是前方,x正向 2. ...

  9. pyqt5-QWidget坐标系统和大小

    获取坐标和尺寸: 坐标的获取视频教程:https://v.qq.com/x/page/t085892mzh9.html  x()    y()   返回控件的坐标 相对于父控件的坐标(窗口框架左上角) ...

随机推荐

  1. Linux下which命令使用详解(转)

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which 查看可执行文件的位置. whereis 查看文件的位置. locate 配合数据库查看文件位置. f ...

  2. 用python开发了一个简单apache web服务端范例,在win10 + apache2.4.9 + python3.5 测试成功

    #!D:\Programs\Python\Python35-32\python.exe import cgi def htmlTop():     print("Content-type: ...

  3. (转) Linux 内核运行参数修改——sysctl命令

    原文:https://blog.csdn.net/u012707739/article/details/78254241 sysctl命令被用于在内核运行时动态地修改内核的运行参数,可用的内核参数在目 ...

  4. (转)AIX的SVMON命令详解

    原文:http://czmmiao.iteye.com/blog/1153499 svmon概述 svmon 命令用于显示当前内存状态的信息,可通过 # lslpp bos.perf.tools 查看 ...

  5. JavaScript设计模式(三) - 策略模式

    什么是策略模式? 策略模式支持在运行时由使用者选择合适的算法,对于使用者而言不用关心背后的具体实现,由使用者自动根据当前程序执行的上下文和配置,从已有的算法列列表中选择出合适的算法来处理当前任务.   ...

  6. jQuery多库共存问题解决方法

    一.问题概述: 1.随着jQuery的流行,采用jQuery和$符为命名空间的js库越来越多,当然jQuery的$符也是参照的Prototype库的,所以当多个库同时以$符或者jQuery为命名空间时 ...

  7. 判断checkbox是否被选中

    jquery判断checked的三种方法: .attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false .prop( ...

  8. 快速创建SpringBoot+SSM解析

    此处使用IDEA快速搭建SpringBoot应用,首先用SpringBoot搭建WEB工程: 然后点击Next生成项目,首次生成可能有点慢,下次创建的时候就会快很多,生成后的目录结构如下: 我们更改下 ...

  9. Kubernetes是什么

    目录 简介 主要概念: 总体结构 参考 Kubernetes概念 简介 kubernetes是一个Google开源的容器编排系统,用于自动部署,扩展和管理容器化应用程序. 随处运行:支持公有云,私有云 ...

  10. [PY3]——字符串的分割、匹配、搜索方法总结

    ?分割.匹配.搜索时可以用到什么样的解决方法? 分割方法总结 1. str.split( ) * 分割字符串 * 返回列表 s1='I love python' # 默认以空格为界定符,且多个空格都当 ...