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. php利用root权限执行shell脚本

    vi /etc/sudoers , 为apache用户赋予root权限,并且不需要密码,还有一步重要的修改(我被困扰的就是这个地方) root  ALL=(ALL)  ALL apache  ALL= ...

  2. 初探领域驱动设计（2）Repository在DDD中的应用

    概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...

  3. Membership三步曲之入门篇 - Membership基础示例

    Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 -  Membership基础示例 Membership三步曲之进阶篇 -  深入剖析Pro ...

  4. lucene 基础知识点

    部分知识点的梳理,参考<lucene实战>及网络资料 1.基本概念 lucence 可以认为分为两大组件: 1)索引组件 a.内容获取:即将原始的内容材料,可以是数据库.网站(爬虫).文本 ...

  5. CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口

    CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口 开始 像下面这样的四个视口的功能是很常用的,所以我花了几天时间在CSharpGL中集成了这个功能. 在CSh ...

  6. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  7. vue-router(2.0)

    用Vue.js+vue-router创建单页应用是比较简单的.使用Vue.js时,我们就已经把组件组合成一个应用了,当你要把vue-router加进来,只要配置组件和路由映射,然后告诉vue-rout ...

  8. 【Win10应用开发】签名与验证

    对数据进行签名和验证,是为了防止数据被“盗版”.比较常规的做法是通过公钥进行验证. 算法上多用SAH_xxxx,就是哈希算法.由于MD5后来被发现存在“非唯一性”,你会发现现在很多一些下载的文件验证都 ...

  9. MVC5 网站开发之四 业务逻辑层的架构和基本功能

    业务逻辑层在Ninesky.Core中实现,主要功能封装一些方法通过调用数据存储层,向界面层提供服务.   目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 ...

  10. Angular中ngCookies模块介绍

    1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...