SVG的画布、画布视区（viewBox）、浏览器视窗的概念

画布

画布是绘制SVG内容的一块区域，理论上在所有维度上都是无限的。（也有人称为“SVG世界”，但我觉得叫画布比较合适）

画布视区（viewBox）

就是截取画布某一块矩形区域作为显示的区域。（有人也称为“视野”或“视区盒子”，但我觉得不够形象。viewBox是与画布相关的，那既然是画布的可视区，那叫画布视区比较容易顾名思义。）

控制画布视区有两个属性：viewBox、preserveAspectRatio。

viewBox

viewBox指定可视区的位置和大小，值有4个数字：viewBox="x, y, width, height" 。

参数 描述
x 左上角横坐标
y 左上角纵坐标
width 宽度
height 高度

preserveAspectRatio

preserveAspectRatio指定viewbox在viewport中的缩放和对齐方式。preserveAspectRatio = "align meetOrSlice"

align参数的值有分为两个部分，第一个部分指定X坐标的对齐方式，第二个部分指定Y坐标的对齐方式。下面列出了所以的X和Y对齐方式：

参数 描述
xMin viewBox的最小X值对齐viewport的左边部
xMid viewBox的X轴中点对齐viewport的X轴中点
xMax viewBox的最大X值对齐viewport的右边部
YMin viewBox的最小Y值对齐viewport的顶边
YMid viewBox的Y轴中点对齐viewport的Y轴中点
YMax viewBox的最大Y值对齐viewport的底边

你可以将X对齐和Y对齐两两结合组成一个align参数，例如：xMaxYMax或xMidYMid。

注意：

1. 默认值是xMidYMid。

2. 如果align设置为none，图形会被缩放以适应viewport大小，而不会管它的宽高比。

meetOrSlice参数指明viewbox的缩放方式。

参数 描述
meet（ 默认值） 保持纵横比缩放viewBox适应viewport。
PS：整个viewBox包含在viewport里。
slice 保持纵横比同时比例小的方向放大填满viewport。
PS：这里注意这个“满”，就是填充了。
none 不保留宽高比。缩放图像适合整个viewport

浏览器视窗（viewport）

用户所能看到的区域，区域大小等于其设置的宽度和高度。（这里之所加上“浏览器”，是为了与画布视区区分开来。）

示例：

慕课网SVG教程对于ViewBox的示例，我觉得不错，可以自己实践操作，看看效果。

SVG中的图形分组

SVG用<g>标签来创建分组，分组元素用于在逻辑上对相关的图形元素进行分组。分组里面的元素会继承分组的属性，另外分组可嵌套使用。

示例：

<svg viewBox="0 0 95 50"

     xmlns="http://www.w3.org/2000/svg">

   <g stroke="green" fill="white" stroke-width="5">

     <circle cx="25" cy="25" r="15"/>

     <circle cx="40" cy="25" r="15"/>

     <circle cx="55" cy="25" r="15"/>

     <circle cx="70" cy="25" r="15"/>

   </g>

</svg>
效果：
 
坐标系统概述

SVG使用的是笛卡尔直角坐标系，为图形做一个统一的定位基准。笛卡尔坐标系就是直角坐标系和斜角坐标系的统称。相交于原点的两条数轴，构成了平面放射坐标系。两条数轴互相垂直的笛卡尔坐标系，称为笛卡尔直角坐标系。

出于对阅读习惯（浏览器）的考虑和DOM的坐标的习惯，SVG使用的是y轴朝下的，所以角度的正方向是顺时针的。

四个坐标系

1. 用户坐标系（User Coordinate）

也可以称为原始坐标系，是画布的坐标系。

2. 自身坐标系（Current Coordinate）

每个图形或分组都会产生一个自身坐标系，用于定义自己的一些图形属性，例如宽高、位置。

3. 前驱坐标系（Previous Coordinate）

即是父容器坐标系。

4. 参考坐标系（Reference Coordinate）

需要对某些图形进行观察、测量的一个坐标系。（例如需要是图形对齐时，就需要选取一个参考坐标系，一般是原始坐标系。）

示例：

<svg viewBox="0 0 95 50"

     xmlns="http://www.w3.org/2000/svg">

   <g stroke="green" fill="white" stroke-width="5">

     <circle cx="25" cy="25" r="15"/>

     <circle cx="40" cy="25" r="15"/>

     <circle cx="55" cy="25" r="15"/>

     <circle cx="70" cy="25" r="15"/>

   </g>

</svg>

1. <svg>使用原始坐标系。

2. cx="25" cy="25" r="15"是circle的自身坐标系。

3. <g>是<circle>前驱坐标系。

坐标变换

1. 坐标变换定义

SVG中，坐标变换是对一个坐标系到另一个坐标系的变换的描述。

2. 线性变换

SVG的坐标变换是使用线性变换的。（线性代数里面有讲这东西）

线性变换方程

X' = aX + cY + e

Y' = bX + dY + f

变换矩阵（Matrix），记为M

这样类似平移、旋转、缩放的操作都可以用矩阵来表示。

3. 线性变换列表

表示一系列的变换，结果为变换的矩阵的乘积。（注意后变换的要放在前面）

例如：

旋转30°之后，再向x、y正方向各平移10。

4. transform属性

transform属性：定义应用于元素及其子元素的变换列表，每个变换由空格或逗号分隔。

PS：MDN关于transform属性的解释可能有一点错。

原文：The transform attribute defines a list of transform definitions that are applied to an element and the element's children. The items in the transform list are separated by whitespace and/or commas, and are applied from right to left.

“applied from right to left.”这里说变换应用是从右到左的，但其实应该是正常的从左到右，矩阵的计算才是从右到左。

属性 描述 示例
matrix(<a> <b> <c> <d> <e> <f>) 使用变换矩阵 向右平移10

matrix(1,0,0,1,10,0)
translate(<x> [<y>]) 平移
PS：y默认是0
向右平移10
translate(10)
scale(<x> [<y>]) 缩放
PS：y未取值时，值等于x		 放大2倍

scale(2)
rotate(<a> [<x> <y>]) 旋转
当x、y没值时，旋转的圆心是用户坐标系；
当x、y有值时，旋转的圆心是（x，y）；		 旋转30°

rotate(30)
skewX(<a>) 向x斜切a度 斜切45度

skewX(45)
skewY(<a>) 向y斜切a度 斜切45度

skewY(45)

注意：

1. 都是没有单位的

2. 进行了变换后，后续的变换都是基于我已经变换的自身坐标系进行的。

示例：

<html>

    <head>

        <title>transform</title>

        <style>

            body {

                background: #eee;

            }

            svg {

                position: absolute;

                border: 1px solid green;

                width: 300px;

                height: 200px;

                left: 50%;

                top: 50%;

                margin-top: -100px;

                margin-left: -150px;

                background: white;

            }

        </style>

    </head>

    <body>

          <svg id="svg" xmlns="http://www.w3.org/2000/svg">

               <rect width="200" height="100" stroke="red" stroke-width="2" fill="none" transform="rotate(30) translate(50)"/>

          </svg>

    </body>

</html>

效果：

这里可以看到，进行旋转30度后，再平移已经不是根据原先自身坐标系了，而是变换后的自身坐标系。蓝色的线段就是平移50的效果。

总结

该文章是SVG课程（慕课网）的学习笔记，以及查阅一些资料，加上我个人理解的一个总结。

 
参考文献
 
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

SVG坐标系统的更多相关文章

  1. SVG坐标系统及图形变换

    前面的话 前面介绍过SVG视野后,本文将开始介绍SVG坐标系统及图形变换 坐标定位 对于所有元素,SVG使用的坐标系统或者说网格系统,和Canvas用的差不多(所有计算机绘图都差不多).这种坐标系统是 ...

  2. 【翻译svg教程 】svg 的坐标系统

    http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...

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

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

  4. 理解SVG坐标系统和变换： transform属性

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

  5. Art-Directing SVG图像viewBox属性

    Art-Directing SVG图像viewBox属性 作者:彦子 日期:2015-06-02 点击:992 svg 译者注:根据Google Dev文档的解释,Art Direction在这篇文章 ...

  6. 8个实用的SVG工具，20 个有用的 SVG 工具，五款超实用的开源SVG工具

    8个实用的SVG工具 [导读] 你还在为没有好用的SVG工具而发愁吗?开发人员的福音来啦!小编为大家收集罗列了8款实用的SVG工具,让我们一起来看看吧! SVG可缩放矢量图形(Scalable Vec ...

  7. D3.js学习笔记（六）——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  8. SVG基本图形

    SVG 是使用 XML 来描述二维图形和绘图程序的语言 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML ...

  9. o'Reill的SVG精髓（第二版）学习笔记——第六章

    第六章:坐标系统变换 想要旋转.缩放或者移动图片到新的位置.可以给对应的SVG元素添加transform属性. 6.1 translate变换 可以为<use>元素使用x和y属性,以在特性 ...

随机推荐

  1. Atiti.大企业病与小企业病 大公司病与小公司病

    Atiti.大企业病与小企业病 大公司病与小公司病 1. 大企业病,一般会符合机构臃肿 .多重领导 .人才流失的特点.1 2. 大企业病避免方法1 3. 小企业病 1 3.1.1. 表现1 4. 如何 ...

  2. [Django]用户权限学习系列之Permission权限基本操作指令

    若需建立py文件进行测试,则在文件开始加入以下代码即可 #coding:utf-8 import os os.environ.setdefault("DJANGO_SETTINGS_MODU ...

  3. linux-linux top 命令各参数详解

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...

  4. 我正在使用Xamarin的跨平台框架—Xamarin.Android回忆录

    一.缘起 在自己给别家公司做兼职外包的时候,已经明确知道外包的活不是那么好干的,一般在经历了初期热血澎湃的激情后,逐渐冷淡,愤怒,再冷淡,再愤怒…,听上去好像高潮迭起,但令人尴尬的是,这高潮迭起我们都 ...

  5. React单元测试——十八般兵器齐上阵，环境构建篇

    一个完整.优秀的项目往往离不开单元测试的环节,就 github 上的主流前端项目而言,基本都有相应的单元测试模块. 就 React 的项目来说,一套完整的单元测试能在在后续迭代更新中回归错误时候给与警 ...

  6. MyBatis4：动态SQL

    什么是动态SQL MyBatis的一个强大特性之一通常是它的动态SQL能力.如果你有使用JDBC或其他相似框架的经验,你就明白条件串联SQL字符串在一起是多么地痛苦,确保不能忘了空格或者在列表的最后的 ...

  7. Failed to stop iptables.service: Unit iptables.service not loaded.

    redhat 7 [root@lk0 ~]# service iptables stop Redirecting to /bin/systemctl stop iptables.service Fai ...

  8. Python学习--03变量类型

    变量赋值 Python中的变量不需要声明,变量的赋值操作既是变量声明和定义的过程. 每个变量在内存中创建,都包括变量的标识,名称和数据这些信息. 每个变量在使用前都必须赋值,变量赋值以后该变量才会被创 ...

  9. 设置Debian8 光秃秃的桌面(图标,窗口样式等)

    在虚拟机里按抓了Debian8, 然后进入桌面后很不习惯,最主要是桌面光秃秃的, 今天终于不小心找到办法了: 按[Win]键, 找到"优化工具"程序; 或者是在右上角的[应用程序] ...

  10. 解析大型.NET ERP系统 单据标准(新增，修改，删除，复制，打印)功能程序设计

    ERP系统的单据具备标准的功能,这里的单据可翻译为Bill,Document,Entry,具备相似的工具条操作界面.通过设计可复用的基类,子类只需要继承基类窗体即可完成单据功能的程序设计.先看标准的销 ...