二、SVG视野、分组、坐标系统

一、整个是个大世界

IMG_1984.PNG

1.1 世界、视窗、视野:

svg: 定义世界，width、height: 控制视窗大小，

viewBox: 控制视野。

viewBox="x, y, width, height"
x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

preserveAspectRatio="xMidYMid meet"
第1个值表示，viewBox如何与SVG视窗对齐；第2个值表示，如何维持高宽比（如果有）。
其中，第1个值又是由两部分组成的。前半部分表示x方向对齐，后半部分表示y方向对齐。家族成员如下：

值	含义
xMin	视窗 和 viewBox的左边对齐
xMid	视窗 和 viewBox的x轴中心对齐
xMax	视窗 和 viewBox的右边对齐
YMin	视窗 和 viewBox的上边缘对齐。 注意Y是大写。
YMid	视窗 和 viewBox的y轴中心点对齐。 注意Y是大写。
YMax	视窗 和 viewBox的下边缘对齐。 注意Y是大写。

没错，就是组合的意思：“右-下”和“中-中”对齐等。

preserveAspectRatio 属性第2部分的值支持下面3个：

值	含义
meet	保持纵横比，viewBox 适应视窗，受
slice	保持纵横比，viewBox比例小的方向 放大填满视窗，攻
none	扭曲纵横比，viewBox以 充分适应视窗，变态

IMG_1985.PNG

1.2 viewBox演示

    
        
        
    
    
        
ViewBox 演示
        

            

                
viewBox
                x: 
                y: 
                width: 
                height: 
            
            

                
preserveAspectRatio
                align: 
                    none
                    xMinYMin
                    xMidYMin
                    xMaxYMin
                    xMinYMid
                    xMidYMid
                    xMaxYMid
                    xMinYMax
                    xMidYMax
                    xMaxYMax
                
                meetOrSlice: 
                    meet
                    slice
                
            
        
        

            
        
        
    

preserveAspectRatio: xMidYMid slice

IMG_1988.PNG

preserveAspectRatio: xMidYMid meet

IMG_1989.PNG

二、图形分组

IMG_1992.PNG

例子：

IMG_1993.PNG

三、坐标系统

3.1 SVG的坐标系

IMG_1996.PNG

3.2 四个坐标系的定义:

IMG_1997.PNG

例：

Oc和Od分别是C和D的自身坐标系、Ob是C和D的前驱坐标系，

Ob是B的自身坐标系、Oa是B的前驱坐标系，

Oa是世界坐标系亦称用户坐标系

IMG_2006.PNG

四、线性变换

4.1 transform属性:

transform属性定义的是: 一个元素, 对自身坐标系的变换

IMG_2012.PNG

4.2 Transform综合案例

例：对分组c先旋转30度，再向x轴平移100

可以看出c是向 旋转后的x方向 平移的

IMG_2019.PNG