一、整个是个大世界
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演示
<!DOCTYPE html>
<html>
<head>
<title>ViewBox 使用演示</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;
}
input[type=number] {
width: 50px;
}
</style>
</head>
<body>
<h1>ViewBox 演示</h1>
<form id="form">
<fieldset>
<legend>viewBox</legend>
<label>x: <input id="vx" type="number" value="0"></label>
<label>y: <input id="vy" type="number" value="0"></label>
<label>width: <input id="vw" type="number" value="300"></label>
<label>height: <input id="vh" type="number" value="200"></label>
</fieldset>
<fieldset>
<legend>preserveAspectRatio</legend>
<label>align: <select id="align">
<option value="none">none</option>
<option value="xMinYMin">xMinYMin</option>
<option value="xMidYMin">xMidYMin</option>
<option value="xMaxYMin">xMaxYMin</option>
<option value="xMinYMid">xMinYMid</option>
<option value="xMidYMid" selected>xMidYMid</option>
<option value="xMaxYMid">xMaxYMid</option>
<option value="xMinYMax">xMinYMax</option>
<option value="xMidYMax">xMidYMax</option>
<option value="xMaxYMax">xMaxYMax</option>
</select></label>
<label>meetOrSlice: <select id="meetOrSlice">
<option value="meet">meet</option>
<option value="slice">slice</option>
</select></label>
</fieldset>
</form>
<p>
<svg id="svg" xmlns="http://www.w3.org/2000/svg">
<!--Face-->
<circle cx="100" cy="100" r="90" fill="#39F" />
<!--Eyes-->
<circle cx="70" cy="80" r="20" fill="white" />
<circle cx="130" cy="80" r="20" fill="white" />
<circle cx="65" cy="75" r="10" fill="black" />
<circle cx="125" cy="75" r="10" fill="black"/>
<!--Smile-->
<path d="M 50 140 A 60 60 0 0 0 150 140"
stroke="white" stroke-width="3" fill="none" />
<rect id="viewBoxIndicator" stroke="red" stroke-width="3.5" fill="none" />
</svg>
</p>
<script>
function update() {
var viewBox = [vx.value, vy.value, vw.value, vh.value].join(' ');
var preserveAspectRatio = [align.value, meetOrSlice.value].join(' ');
svg.setAttribute('viewBox', viewBox);
svg.setAttribute('preserveAspectRatio', preserveAspectRatio);
var rect = viewBoxIndicator;
rect.setAttribute('x', vx.value);
rect.setAttribute('y', vy.value);
rect.setAttribute('width', vw.value);
rect.setAttribute('height', vh.value);
}
form.addEventListener('input', update);
update();
</script>
</body>
</html>
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
