Week9-素材收集與製作 (II) 動畫＆網頁圖形編輯
1. 課程Review
2. SVG 動畫製作
參考網站：SVG Editor
參考網站：Jenkov.com SVG Tutorial-Animation
參考範例：
Local老師示範暈頭轉向動畫教學
<?xml version="1.0"?>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<g id="svg_31">
<circle id="svg_1" r="60" cy="110.5" cx="196" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_2" r="40" cy="110.5" cx="196" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_3" r="20" cy="110.5" cx="196" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_4" r="1" cy="110.5" cx="196" stroke-width="5" stroke="#000000" fill="#000000"/>
<circle id="svg_25" r="2.828427" cy="91.5" cx="243" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#fce702" fill="#ffff00"/>
<animateTransform
attributeName="transform"
begin="0s"
dur="20s"
type="rotate"
from="0 196 110.5"
to="360 196 110.5"
repeatCount="indefinite"
/>
</g>
<g id="svg_37">
<circle id="svg_5" r="60" cy="110.5" cx="373.5" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_6" r="40" cy="110.5" cx="373.5" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_7" r="20" cy="110.5" cx="373.5" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_8" r="1" cy="110.5" cx="373.5" stroke-width="5" stroke="#000000" fill="#000000"/>
<circle id="svg_26" r="2.828427" cy="63.5" cx="358.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#fce702" fill="#ffff00"/>
<animateTransform
attributeName="transform"
begin="0s"
dur="15s"
type="rotate"
from="0 373.5 110.5"
to="360 373.5 110.5"
repeatCount="indefinite"
/>
</g>
<g id="svg_38">
<circle id="svg_9" r="60" cy="232" cx="101" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_10" r="40" cy="232" cx="101" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_11" r="20" cy="232" cx="101" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_12" r="1" cy="232" cx="101" stroke-width="5" stroke="#000000" fill="#000000"/>
<circle id="svg_27" r="2.828427" cy="213" cx="125" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#fce702" fill="#ffff00"/>
<animateTransform
attributeName="transform"
begin="0s"
dur="1s"
type="rotate"
from="0 101 232"
to="360 101 232"
repeatCount="indefinite"
/>
</g>
<g id="svg_39">
<circle id="svg_13" r="60" cy="350" cx="196" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_14" r="40" cy="350" cx="196" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_15" r="20" cy="350" cx="196" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_16" r="1" cy="350" cx="196" stroke-width="5" stroke="#000000" fill="#000000"/>
<circle id="svg_28" r="2.828427" cy="357" cx="171" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#fce702" fill="#ffff00"/>
<animateTransform
attributeName="transform"
begin="0s"
dur="12s"
type="rotate"
from="0 196 350"
to="360 196 350"
repeatCount="indefinite"
/>
</g>
<g id="svg_40">
<circle id="svg_17" r="60" cy="350" cx="374.5" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_18" r="40" cy="350" cx="374.5" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_19" r="20" cy="350" cx="374.5" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_20" r="1" cy="350" cx="374.5" stroke-width="5" stroke="#000000" fill="#000000"/>
<circle id="svg_29" r="2.828427" cy="393" cx="349.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#fce702" fill="#ffff00"/>
<animateTransform
attributeName="transform"
begin="0s"
dur="8s"
type="rotate"
from="0 374.5 350"
to="360 374.5 350"
repeatCount="indefinite"
/>
</g>
<g id="svg_41">
<circle id="svg_21" r="60" cy="232" cx="470" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_22" r="40" cy="232" cx="470" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_23" r="20" cy="232" cx="470" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<circle id="svg_24" r="1" cy="232" cx="470" stroke-width="5" stroke="#000000" fill="#000000"/>
<circle id="svg_30" r="2.828427" cy="208" cx="428" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#fce702" fill="#ffff00"/>
<animateTransform
attributeName="transform"
begin="0s"
dur="3s"
type="rotate"
from="0 470 232"
to="360 470 232"
repeatCount="indefinite"
/>
</g>
<line id="svg_42" y2="297" x2="343" y1="165.999999" x1="224" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#050505" fill="none"/>
<line id="svg_43" y2="294" x2="224" y1="160" x1="337" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#050505" fill="none"/>
<line id="svg_44" y2="230" x2="409" y1="227" x1="163" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#050505" fill="none"/>
<circle id="svg_45" r="3.5" cy="227" cx="280" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#fffcfc" fill="#ffffff"/>
<animateTransform
attributeName="transform"
begin="0s"
dur="15s"
type="rotate"
from="0 280 227"
to="360 280 227"
repeatCount="indefinite"
/>
</g>
</svg>
一串語法之後，成果是......
已暈@@"
3. Base64 Image
參考網站：base64image
參考網站：圓角
參考網站：陰影
期中報告格式
- 研究動機與目的
- 研究背景
- 資料搜集（條列式介紹）
- 預期研究結果