SVG Chapter 2

资料来源 imooc 慕课网

2.1 世界,视野,视窗

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

2.2 SVG图形分组

<g>标签来创建分组:

  • 属性可继承
  • 可通过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'的自身坐标系
  • <g id='B' transform="translate(0, 50)">是什么意思?组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对其所有包含的内容(包含的子坐标)都有效