一、整個(gè)是個(gè)大世界
IMG_1984.PNG
1.1 世界、視窗、視野:
svg: 定義世界，width、height: 控制視窗大小，
viewBox: 控制視野。
viewBox="x, y, width, height"
x:左上角橫坐標(biāo)，y:左上角縱坐標(biāo)，width:寬度，height:高度
preserveAspectRatio="xMidYMid meet"
第1個(gè)值表示，viewBox如何與SVG視窗對(duì)齊；第2個(gè)值表示，如何維持高寬比（如果有）。
其中，第1個(gè)值又是由兩部分組成的。前半部分表示x方向?qū)R，后半部分表示y方向?qū)R。家族成員如下：
| 值 | 含義 |
|---|---|
| xMin | 視窗 和 viewBox的左邊對(duì)齊 |
| xMid | 視窗 和 viewBox的x軸中心對(duì)齊 |
| xMax | 視窗 和 viewBox的右邊對(duì)齊 |
| YMin | 視窗 和 viewBox的上邊緣對(duì)齊。 注意Y是大寫(xiě)。 |
| YMid | 視窗 和 viewBox的y軸中心點(diǎn)對(duì)齊。 注意Y是大寫(xiě)。 |
| YMax | 視窗 和 viewBox的下邊緣對(duì)齊。 注意Y是大寫(xiě)。 |
沒(méi)錯(cuò)，就是組合的意思：“右-下”和“中-中”對(duì)齊等。
preserveAspectRatio 屬性第2部分的值支持下面3個(gè)：
| 值 | 含義 |
|---|---|
| meet | 保持縱橫比，viewBox 適應(yīng)視窗，受 |
| slice | 保持縱橫比，viewBox比例小的方向 放大填滿(mǎn)視窗，攻 |
| none | 扭曲縱橫比，viewBox以 充分適應(yīng)視窗，變態(tài) |
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
三、坐標(biāo)系統(tǒng)
3.1 SVG的坐標(biāo)系
IMG_1996.PNG
3.2 四個(gè)坐標(biāo)系的定義:
IMG_1997.PNG
例：
Oc和Od分別是C和D的自身坐標(biāo)系、Ob是C和D的前驅(qū)坐標(biāo)系，
Ob是B的自身坐標(biāo)系、Oa是B的前驅(qū)坐標(biāo)系，
Oa是世界坐標(biāo)系亦稱(chēng)用戶(hù)坐標(biāo)系
IMG_2006.PNG
四、線(xiàn)性變換
4.1 transform屬性:
transform屬性定義的是: 一個(gè)元素, 對(duì)自身坐標(biāo)系的變換
IMG_2012.PNG
4.2 Transform綜合案例
例：對(duì)分組c先旋轉(zhuǎn)30度，再向x軸平移100
可以看出c是向 旋轉(zhuǎn)后的x方向 平移的
IMG_2019.PNG
