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

视野和世界

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

世界是客观地,只要定义了世界的内容,那么内容就是确定的。视野是主观地,大部分绘图API都提供视野的控制方法.在SVG中viewbox用来控制视野.

SVG中的世界是无穷大的,视野(viewbox)是观察世界的一个矩形区域.

上图中svg世界中有2个矩形,但是在当前的视野中我们只能看到一个绿色的矩形,改变视野我们可以看到世界中的紫色的矩形,如下图:

svg元素中可以指定宽高属性,表示SVG文件渲染的大小(大小也可以通过样式表来定义),这个区域的大小也就是视窗.视窗是浏览器开辟的用来渲染SVG内容的一个区域,可能根据样式上下文改变.

在 SVG 当中,里面的内容就是对 SVG 世界的定义,这个 SVG 文文件里面有多少个矩形多少条曲线,在哪里,什么颜色,都是在定义世界。

而视野,也就是观看世界的矩形区域是一个,使用用 viewBox 进行定义。

这里出现了视窗和视野,在理想情况下,视野和视窗有一样的尺寸,那浏览器就可以地把视野完美地填充到视窗内。可是如果视窗和视野大小不一致,就存在如何控制这个
填充的问题,填充的策略使用preserveAspectRatio进行指定,该属性定义了显示的宽高比。

坐标系统和坐标变换

SVG中的图形分组

使用<g>标签来创建分组(组内的元素可以看做是一个整体)
组内的标签继承属性
使用transform属性定义坐标变换,可以最组内的元素进行整体变换
组可以嵌套

在上述的示例图中我们看到了2个坐标系.接下来我们来看一下SVG中的坐标系统:

SVG使用的是笛卡尔坐标系.该坐标系定义了一个原点和2条相互垂直的数轴.基于原点和数轴可以定义角度分.角度的正方向是从x轴的正方向到y轴的正方向,所以在浏览器平面上角度是顺时针方向.

SVG中的坐标系可以分为以下的4类:

User Coordinate:用户坐标系,世界的坐标系
Current Coordinate:自身坐标系,每个元素或者分组自己与生俱来
Previous Coordinate:前驱坐标系,父容器的坐标系
Reference Coordinate:参考坐标系,使用其它坐标系来考究自身的情况时使用

坐标变换指的是从一个坐标系统到另一个坐标系统.变换分为以下的几种:

SVG中的坐标系统和坐标变换相关推荐

ArcGIS中的坐标系统和投影变换
ArcGIS中的坐标系统和投影变换主要内容一.地球椭球体(Ellipsoid) 二.大地基准面(Geodetic datum) 三.空间参考系统(Spatial Reference) 四.坐标系统 ...
【转 | 侵删】2D 绘图技术中的坐标系统与坐标变换
本文介绍在 2D 绘图技术中的坐标系统和坐标变换的相关知识.同时介绍 Kity 在这方面提供的 API .希望这些知识对于需要进行图形应用开发的同学会有所帮助. 锤子的故事很久以前,有一个画家,他很 ...
坐标系统和投影变换基础知识及其在ArcGIS桌面产品中的应用（二）
坐标系统和投影变换在ArcGIS桌面产品中的应用在我们了解了坐标系统和投影的定义和其内在的联系后,本文着重总结一下坐标系统和投影变换在桌面产品(版本9.2)中的应用(分ArcMap.ArcCatal ...
05——svg的坐标系统和坐标系
一.什么是svg的坐标系统众所周知,数学上的坐标系统,大部分是指笛卡尔直角坐标系并且:x轴向右,y轴向上,角度为逆时针在svg中,坐标系统同样也是笛卡尔直角坐标系,x轴向右但是:y轴 ...
04——svg中的图形分组＜g＞
一.在svg中,使用 <g> 标签来创建分组 <g> 标签内部的图形,会继承其属性 <g> 可以使用 transform 属性进行坐标变换,变换之后可以理解为新的自 ...
Android OpenGL ES 学习(九) – 坐标系统和实现3D效果
OpenGL 学习教程 Android OpenGL ES 学习(一) – 基本概念 Android OpenGL ES 学习(二) – 图形渲染管线和GLSL Android OpenGL ES 学 ...
【RK3399Pro学习笔记】十三、ROS中的坐标系管理系统
目录 TF功能包能干什么? TF坐标变换如何实现? 例程 view_frames tf_echo rviz 平台:华硕 Thinker Edge R 瑞芯微 RK3399Pro 固件版本:Tinker ...
为什么abc三相电压加起来是0，而坐标变换之后在dq0坐标系中有值呢？——矢量控制中abc到dq0坐标系的坐标变换的思考
在电机控制.电力电子逆变电路和PQ控制中都会用到坐标变换,在学习电机控制时,感觉对坐标变换比较熟悉了. 但当运用在电力电子逆变电路和PQ控制的坐标变换时,又迷惑了. 为什么abc三相电压加起来是0,而 ...
聊聊GIS中的坐标系|再版
目录 1. 经纬度(例: 119.32°E, 32.48°N)与米(∟, 直角坐标) 2. 为什么有两种表达(不同点) 3. 内在联系(相同点) 4. 常用坐标系统 4.1. 一对名词:WKID与EP ...

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

视野和世界

坐标系统和坐标变换

SVG中的图形分组

SVG中的坐标系统和坐标变换相关推荐

最新文章

热门文章