SVG Chapter 2

资料来源 imooc 慕课网

2.1 世界，视野，视窗

• 世界：是无穷大的，由svg代码定义
• 视野：观看 世界 的一个矩形区域，由SVG编程者 通过viewbox（视野大小），preserveAspectRatio（如何显示）控制
• 视窗：width，height渲染出来的内容，是浏览器开辟的区域，可能因为其他条件而改变，可被网页前段编程人员 改变
  
  

  世界与视野

2.2 SVG图形分组

标签来创建分组：

• 属性可继承
• 可通过transform属性定义坐标变换
• 可嵌套

2.3 坐标系统概述

SVG使用的是 笛卡尔坐标系，但需要注意的是

• SVG中的坐标系Y轴是向下的
• >0 的角度是顺时针（从X轴正方向 => Y轴正方向的方向）
  
  

  SVG的坐标系

2.4 四个坐标系

用户坐标系 User Coordinate
世界的坐标系，最原始的坐标系。其他所有的坐标系都是基于它的。

User Coordinate

自身坐标系 Current Coordinate
每个图形元素或分组独立与生俱来的�

前驱坐标系 Previous Coordinate
父容器的坐标系 �

User & Current & Previous

• OA：世界坐标系，也是SVG的自身坐标系
• OB的前驱坐标系？ OA，因为OA是OB的容器
• C和D的宽，高，x，y分别基于：C的自身坐标系OC 和 D的自身坐标系OD
• C和D的前驱坐标系是？ OB
• OB也是分组id='B'的自身坐标系
• 是什么意思？组B的自身坐标系OB是从它的前驱坐标系OA通过translate(0, 50)这个操作得到的
• OB，OC，OD为什么重合了？因为OB同时是OC和OD的前驱坐标系，而OC和OD都没有定义translate属性

参考坐标系 Reference Coordinate
其实就是任意一个坐标系。 是个相对坐标系，只在观察测量是使用

2.5 坐标变换

• 定义：SVG 中，「坐标变换」是对⼀一个坐 标系到另⼀一个坐标系的变换的描述

• 线性变换
  a) 线性变换 之 平移
  

  

  线性变换 之 平移
  
  b) 线性变换 之 旋转
  用极坐标表示直角坐标：
  
  

  用极坐标表示直角坐标
  
  
  

  线性变换 之 旋转
  
  c) 线性变换 之 缩放
  
  

  线性变换 之 缩放
  
  d) 线性变换 之 混合变换： 单个线性变换矩阵，可以表⽰示所有的线性变换。但是，⼀一般我们去描述⼀一个线性变换可能更愿意分开⼀一步步来描述。比如说，先旋转30度，再平移（10，10）
  ==> 我们用一个矩阵表示旋转M(rotate)，另一个矩阵表示平移M(translate)
  ==> 最后两个矩阵的乘积即为 该混合变换的结果
  ==> 需要注意的是： 顺序是影响效果的，最后⾯面的变换，需要乘在前⾯面。
  
  

  image.png

• transform属性：表达的是 前驱坐标系 到 自身坐标系 的线性变换
  

  

  transform属性

• 通过实例来说明
  实例视频点击这里
  实例代码点击这里
  > 每一步的变换，都是基于前面变换完成之后的自身坐标系进行的
  > 对一个坐标系的transform对其所有包含的内容（包含的子坐标）都有效