05——svg的坐标系统和坐标系
一、什么是svg的坐标系统
众所周知，数学上的坐标系统，大部分是指 笛卡尔直角坐标系
并且：x轴 向右，y轴 向上，角度为 逆时针
在svg中，坐标系统同样也是笛卡尔直角坐标系，x轴 向右
但是：y轴向下，角度为 顺时针
二、什么是svg的坐标系？
在svg中，共有4种坐标系：
用户坐标系自身坐标系前驱坐标系参考坐标系
我们来逐个了解一下
1、用户坐标系
即世界坐标系，指的是最原始的svg坐标系
2、自身坐标系
图形 元素或 分组 本身具有 的坐标系
如下图，rect 的坐标系 与 svg坐标系 、用户坐标系都是重合的
3、前驱坐标系
即 父级 坐标系。
自身坐标系 不发生变换 的情况下，和前驱坐标系是重合的。
如下图，rect 变换后 自身坐标系 是 蓝色坐标系，前驱坐标系即 svg 的坐标系（与用户坐标系Ouser重合）
4、参考坐标系
是一种 相对 的概念，没有特指哪个坐标系。
比如上面的图中，用户坐标系 也可以作为 rect 的参考坐标系，只是坐标值要根据实际情况重新计算。
三、综合实例
从头到尾顺一下思路
- svg的坐标系为
OA，也是原始的用户坐标系 - 分组B的坐标系为
OB，translate(0, 50) 后，OB坐标系整体下移50像素，注意是OB坐标系本身下移，而不是OB的内容下移 - rect C的坐标系为
OC，宽高是自己的属性，x、y则是相对于自身坐标系OC的坐标值,OC没有变换，所以与父级坐标系重合 - rect D的坐标系为
OD，细节解释同OC - 由于C、D没有translate，所以OB、OC、OD重合
在这里就可以理解上一篇的疑问了：
上一篇的 rect 的 x 、y是相对
自身坐标系的值，由于自身没有变换，所以rect坐标系与父级坐标系重合，也就是相对父级 g 对应坐标系的值
重要的一点：transform 是 基于前驱坐标系 的 自身坐标系 的变换，所以变换是有先后顺序的，顺序改变，变换结果就会不同，有兴趣的可以看下一篇的简单例子
05——svg的坐标系统和坐标系相关推荐
- SVG中的坐标系统和坐标变换
视野和世界 2D绘图中很多人会有一个误区,就是我绘图的区域是一个矩形区域.无论新建一个画布还是创建了一个容器,心里都想象里面有一个矩形区域.其实,在SVG当中,矩形区域只是视野,是我们看到的部分.实际 ...
- 坐标系统和投影变换基础知识及其在ArcGIS桌面产品中的应用（二）
坐标系统和投影变换在ArcGIS桌面产品中的应用 在我们了解了坐标系统和投影的定义和其内在的联系后,本文着重总结一下坐标系统和投影变换在桌面产品(版本9.2)中的应用(分ArcMap.ArcCatal ...
- Android OpenGL ES 学习(九) – 坐标系统和实现3D效果
OpenGL 学习教程 Android OpenGL ES 学习(一) – 基本概念 Android OpenGL ES 学习(二) – 图形渲染管线和GLSL Android OpenGL ES 学 ...
- ArcGIS中的坐标系统和投影变换
ArcGIS中的坐标系统和投影变换 主要内容 一.地球椭球体(Ellipsoid) 二.大地基准面(Geodetic datum) 三.空间参考系统(Spatial Reference) 四.坐标系统 ...
- arcgis 坐标系 2000坐标系_干货 | 关于投影和坐标系那些事，你是否都已还给了老师？...
很多新接触GIS的人员对地图投影以及坐标系统很难理解,甚至做GIS开发做了好几年的人也有这方面的疑惑,地球仪式的地图是如何变成纸上的平面地图的?平面的二维地图是如何在三维GIS里面进行展示的,因为三维 ...
- 双球坐标系_坐标系为啥有多种，笛卡尔坐标系、柱坐标系、球坐标系都有啥区别...
什么是坐标系 坐标系,是理科常用辅助方法.为了说明质点的位置.运动的快慢.方向等,必须选取其坐标系.在 参照系 中,为确定空间一点的位置,按规定方法选取的有次序的一组数据,这就叫做"坐标&q ...
- BetaFlight深入传感设计之九：传感坐标系/机体坐标系/导航坐标系/经纬度坐标系
BetaFlight深入传感设计之九:传感坐标系/机体坐标系/导航坐标系/经纬度坐标系 1. 问题症结 2. 入手分析 2.1 传感坐标系 2.2 机体坐标系 2.3 导航坐标系 2.4 经纬坐标系 ...
- 【Revit二次开发】链接模型坐标系/族坐标系与模型坐标系转换
前因:因做管线分布时,参照线选择Revit链接文件中的构件(墙,梁,柱,管等)后,调整的管距离参照线的距离不对,经测试是坐标系不同导致.查了很多资料,故总结如下 Revit中坐标系有哪几种(原文链接: ...
- ENVI定义坐标系及坐标系转换
一.实验名称: 定义坐标系及坐标系转换 二.实验目的: 熟悉ENVI软件中的基本操作和设置,掌握自定义坐标系的方法,能够对数据进行坐标系转换. 三.实验内容和要求: 1.添加椭球体文件. 2.添加基准 ...
最新文章
- uniapp里的mounted_uni-app 生命周期函数执行顺序
- 福利继续：赠书《Spring Cloud微服务-全栈技术与案例解析》
- 转 linux常用查看硬件设备信息命令
- ppp lcp协商报文有哪些_PPP协议
- STM32开发 -- 可调直流稳压电源
- 接口自动化测试之PHPUnit-框架代码编写2
- mysql 指定目录_mysql 更改默认数据目录
- 在MFC中添加用户自定义消息
- 【ElasticSearch 】ElasticSearch监控工具 cerebro
- python如何定义m×n矩阵_python的N×M矩阵乘法
- 网页中自私自利且影响他人的Float
- 2020数学建模B题
- 任正非:唯一有愧的是对不起父母
- matlab幻方变换_Matlab入门1-幻方矩阵
- [生成模型新方向]: score-based generative models
- html- 颜色代码
- Storage System
- Mac终端ssh连接Linux服务器
- ORACLE用自定义函数实现EXCEL中的NORMSINV与NORMSDIST函数功能
- 单片机2017福建省中职省赛_2017年福建省职业院校技能大赛首批设115个赛项