http://nice-learning.net/nlWiki/index.php?action=history&feed=atom&title=SVG%E5%8B%95%E7%95%AB%E9%80%B2%E9%9A%8E%E4%BD%BF%E7%94%A8 SVG動畫進階使用 - 修訂歷史 2026-05-01T21:58:35Z 本 Wiki 上此頁面的修訂歷史 MediaWiki 1.34.2 http://nice-learning.net/nlWiki/index.php?title=SVG%E5%8B%95%E7%95%AB%E9%80%B2%E9%9A%8E%E4%BD%BF%E7%94%A8&diff=5315&oldid=prev 丁志仁：/* 參考資料 */ 2021-04-26T01:11:41Z <p><span dir="auto"><span class="autocomment">參考資料</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="zh-Hant-TW"> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">於 2021年4月26日 (一) 01:11 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l331" >行 331：</td> <td colspan="2" class="diff-lineno">行 331：</td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E4%BA%92%E5%8B%95 此連結點開才能使用] --&gt;</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E4%BA%92%E5%8B%95 此連結點開才能使用] --&gt;</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===參考資料===</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===參考資料===</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[https://intersection.tw/<del class="diffchange diffchange-inline">%E8%A8%AD%E8%A8%88%E5%B8%AB%E5%B0%8D</del>-svg-<del class="diffchange diffchange-inline">%E6%87%89%E8%A9%B2%E6%9C%89%E7%9A%84%E8%A7%80%E5%BF%B5</del>-38ba64b48b32 工程師必須知道的SVG觀念]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[https://intersection.tw/<ins class="diffchange diffchange-inline">設計師對</ins>-svg-<ins class="diffchange diffchange-inline">應該有的觀念</ins>-38ba64b48b32 工程師必須知道的SVG觀念]</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[分類:資訊基礎應用]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[分類:資訊基礎應用]]</div></td></tr> <!-- diff cache key nlWiki-wiki_:diff::1.12:old-5314:rev-5315 --> </table> 丁志仁 http://nice-learning.net/nlWiki/index.php?title=SVG%E5%8B%95%E7%95%AB%E9%80%B2%E9%9A%8E%E4%BD%BF%E7%94%A8&diff=5314&oldid=prev 丁志仁：/* 參考資料 */ 2021-04-26T01:10:56Z <p><span dir="auto"><span class="autocomment">參考資料</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="zh-Hant-TW"> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">於 2021年4月26日 (一) 01:10 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l331" >行 331：</td> <td colspan="2" class="diff-lineno">行 331：</td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E4%BA%92%E5%8B%95 此連結點開才能使用] --&gt;</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E4%BA%92%E5%8B%95 此連結點開才能使用] --&gt;</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===參考資料===</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===參考資料===</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">[</del>[https://intersection.tw/%E8%A8%AD%E8%A8%88%E5%B8%AB%E5%B0%8D-svg-%E6%87%89%E8%A9%B2%E6%9C%89%E7%9A%84%E8%A7%80%E5%BF%B5-38ba64b48b32 工程師必須知道的SVG觀念<del class="diffchange diffchange-inline">]</del>]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[https://intersection.tw/%E8%A8%AD%E8%A8%88%E5%B8%AB%E5%B0%8D-svg-%E6%87%89%E8%A9%B2%E6%9C%89%E7%9A%84%E8%A7%80%E5%BF%B5-38ba64b48b32 工程師必須知道的SVG觀念]</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[分類:資訊基礎應用]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[分類:資訊基礎應用]]</div></td></tr> </table> 丁志仁 http://nice-learning.net/nlWiki/index.php?title=SVG%E5%8B%95%E7%95%AB%E9%80%B2%E9%9A%8E%E4%BD%BF%E7%94%A8&diff=3139&oldid=prev 歐陽曉祺：/* 定義一次，引用多次 */ 2020-11-23T07:30:10Z <p><span dir="auto"><span class="autocomment">定義一次，引用多次</span></span></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="zh-Hant-TW"> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">於 2020年11月23日 (一) 07:30 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l95" >行 95：</td> <td colspan="2" class="diff-lineno">行 95：</td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>**花瓣</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>**花瓣</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;img src=&#039;http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E8%8A%B1%E6%9C%B5.svg&#039; /&gt;</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;img src=&#039;http://jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/%E8%8A%B1%E6%9C%B5.svg&#039; /&gt;</div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===漸層===</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===漸層===</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>漸層的類型有兩種，線形漸層和放射形漸層。線形漸層沿直線變化，在 defs元素裡創建一個 &lt;linearGradient&gt; 元素，就創建了一個線形漸層。漸變必須有一個id屬性，否則它不能被其他元素引用，等於白做了。</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>漸層的類型有兩種，線形漸層和放射形漸層。線形漸層沿直線變化，在 defs元素裡創建一個 &lt;linearGradient&gt; 元素，就創建了一個線形漸層。漸變必須有一個id屬性，否則它不能被其他元素引用，等於白做了。</div></td></tr> </table> 歐陽曉祺 http://nice-learning.net/nlWiki/index.php?title=SVG%E5%8B%95%E7%95%AB%E9%80%B2%E9%9A%8E%E4%BD%BF%E7%94%A8&diff=3032&oldid=prev 張又懿 於 2020年11月22日 (日) 13:48 2020-11-22T13:48:27Z <p></p> <table class="diff diff-contentalign-left" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="zh-Hant-TW"> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">←上個修訂</td> <td colspan="2" style="background-color: #fff; color: #222; text-align: center;">於 2020年11月22日 (日) 13:48 的修訂</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l267" >行 267：</td> <td colspan="2" class="diff-lineno">行 267：</td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*以此類推，雖然曲線細緻度不同，但底層的原理一樣。</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*以此類推，雖然曲線細緻度不同，但底層的原理一樣。</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>===<del class="diffchange diffchange-inline">十、動畫</del>===</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>===<ins class="diffchange diffchange-inline">動畫</ins>===</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*共通屬性：</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*共通屬性：</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*#attributeName：</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>*#attributeName：</div></td></tr> <tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l333" >行 333：</td> <td colspan="2" class="diff-lineno">行 333：</td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[分類:<del class="diffchange diffchange-inline">108上學年編輯培力</del>]]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[分類:<ins class="diffchange diffchange-inline">資訊基礎應用</ins>]]</div></td></tr> </table> 張又懿 http://nice-learning.net/nlWiki/index.php?title=SVG%E5%8B%95%E7%95%AB%E9%80%B2%E9%9A%8E%E4%BD%BF%E7%94%A8&diff=3031&oldid=prev 張又懿 於 2020年11月22日 (日) 13:47 2020-11-22T13:47:35Z <p></p> <a href="http://nice-learning.net/nlWiki/index.php?title=SVG%E5%8B%95%E7%95%AB%E9%80%B2%E9%9A%8E%E4%BD%BF%E7%94%A8&amp;diff=3031&amp;oldid=3027">顯示變更</a> 張又懿 http://nice-learning.net/nlWiki/index.php?title=SVG%E5%8B%95%E7%95%AB%E9%80%B2%E9%9A%8E%E4%BD%BF%E7%94%A8&diff=3027&oldid=prev 張又懿：已建立頁面，內容為 "===SVG動畫簡介=== SVG的動畫" 2020-11-21T15:56:01Z <p>已建立頁面，內容為 &quot;===SVG動畫簡介=== SVG的動畫&quot;</p> <p><b>新頁面</b></p><div>===SVG動畫簡介===<br /> SVG的動畫</div> 張又懿