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

kevin 发布于2019-08-02 18:29 / 1787人阅读

摘要：视野和世界绘图中很多人会有一个误区就是我绘图的区域是一个矩形区域。其实在当中矩形区域只是视野是我们看到的部分。可是如果视窗和视野大小不一致就存在如何控制这个填充的问题填充的策略使用进行指定该属性定义了显示的宽高比。

视野和世界

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

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

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

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

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

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

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

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

坐标系统和坐标变换 SVG中的图形分组

使用标签来创建分组(组内的元素可以看做是一个整体)

组内的标签继承属性

使用transform属性定义坐标变换,可以最组内的元素进行整体变换

组可以嵌套

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

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

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

User Coordinate:用户坐标系,世界的坐标系

Current Coordinate:自身坐标系,每个元素或者分组自己与生俱来

Previous Coordinate:前驱坐标系,父容器的坐标系

Reference Coordinate:参考坐标系,使用其它坐标系来考究自身的情况时使用

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

专线服务 idc机房托管坐标变换苹果坐标系坐标转换坐标系坐标系详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55396.html

css的2D转换

摘要：的转换即，进行一些的转换坐标描述坐标的系统有笛卡尔坐标系统和齐次坐标系。其单位为数据类型中的该缩放仅仅支持欧几里得平面二维平面上的变换设置的的值为至此，完成了一个横轴一倍，纵轴一倍的放大。的转换坐标齐次坐标系由笛卡尔坐标系投影得到。脚本化css下面通过css实现动画效果，可以使用脚本化的css实现滑入，轮廓伸缩的列表，即动态的HTML，一个过时的说法DHTML 一些css的基础知识 ...

gitmilk 2019-08-23 10:50 评论0 收藏0
Canvas 的基本原理

摘要：关于这两个的细节直接参考文档像素操作基于像素的可以实现针对单个像素的操作，这也是画布底层的，通过调用方法将返回一个对象，该对象表示画布中原始的像素信息，通过调用方法也可以创建一个空的对象，最后方法将处理后的像素输出到画布中。过个年一下荒废了个把月。最近刚接触canvas，将一些概念点简单归纳下，canvas是基于像素的图像API，与svg的最大的区别在于canvas需要重绘(can...

philadelphia 2019-08-19 17:38 评论0 收藏0
JavaScript 编程精解中文第三版十七、在画布上绘图

摘要：贝塞尔曲线方法可以绘制一种类似的曲线。不同的是贝塞尔曲线需要两个控制点而不是一个，线段的每一个端点都需要一个控制点。下面是描述贝塞尔曲线的简单示例。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：Drawing on Canvas 译者：飞龙协议：CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分参考了《JavaScript 编程精解（第 2...

habren 2019-08-23 18:19 评论0 收藏0
《SVG精髓》笔记（二）

摘要：元素元素会将其所有子元素作为一个组合，通常组合还会有一个唯一的作为名称。变换描述按照指定的和值移动用户坐标系统。比例值可以是小数或则负数和相同按照指定的旋转用户坐标。旋转中心由和指定根据指定的倾斜所有坐标。 3. 文档结构在SVG中使用样式（四种方式，可以联想对照HTML样式方法）内联样式, 直接在标签里设置style属性内部样式表，可以同时为多个元素设置样式 de...

My_Oh_My 2019-08-01 18:21 评论0 收藏0
《SVG精髓》笔记（二）

摘要：元素元素会将其所有子元素作为一个组合，通常组合还会有一个唯一的作为名称。变换描述按照指定的和值移动用户坐标系统。比例值可以是小数或则负数和相同按照指定的旋转用户坐标。旋转中心由和指定根据指定的倾斜所有坐标。 3. 文档结构在SVG中使用样式（四种方式，可以联想对照HTML样式方法）内联样式, 直接在标签里设置style属性内部样式表，可以同时为多个元素设置样式 de...

entner 2019-08-29 14:11 评论0 收藏0