第十六章、辣個 SVG 也許會遲到，但永不缺席。(合)

第 12 屆 iThome 鐵人賽

DAY 17

Modern Web

網頁阿尼尛，到底是在幹尛？系列第 17 篇

12th鐵人賽好想工作室

CathyShen

團隊好想工作室 v4.0

2020-10-02 11:42:21

1464 瀏覽

分享至

簡介

想要征服大海，成為勇敢的海上戰士，當然要先學會利用大自然元素確定方位，並且觀測氣象囉！

那麼在 SVG 系列文章的最後一天，我們就來繪製兩個有關天氣與太空的招式吧！

第一個範例 我們來試著畫簡單的 SVG 小圖，並且賦予他們動畫效果。

第二個範例 中，由於要繪製大量的 SVG 圖實在是太耗時又耗神，好在現在網路圖庫發達，我們可以直接上網下載免費且版權開放的圖片來製作 SVG 動畫。所以我們就挑選一張喜歡的圖片來學習操控天氣的能力吧！

流星旋轉

首先先定義好一個 svg 框架：

<svg viewBox="0 0 160 160" width="160" height="160">
</svg>

繪製一個圓形，當作星球本體：

<circle cx="80" cy="80" r="50" fill="#67AAF9" />

繪製一個 path 路徑，當作流星：

<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF"></path>

在流星元素內部設定流星的動畫模式，這邊我們用 animationTransfrom 來移動元素位置，起始點 from rotate(angle,[cx,cy]) 到終點 to rotate(angle,[cx,cy]):

<animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />

用一個 g 將流星元素與動畫元素包起來並且在外層的群組設定流星要移動的路徑形狀，由於 g 會影響內部子元素，所以流星本體會依照外層噂的路徑動作：

<g transform="matrix(0.866, -0.5, 0.25, 0.433, 80, 80)"></g>

最後，因為要讓流星有「繞道星球本體後面」效果，所以我們在最上層的星球上面疊上一層色塊將流星藏到該色塊的背後：

<path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" fill="#7BBFFB"/>

完成

必殺·火藥流星！

氣象圖

由於要繪製大量的 SVG 圖實在是太耗時又耗神，好在現在網路圖庫發達，我們可以直接上網下載免費且版權開放的圖片來製作 SVG 動畫。
所以我們就挑選一張喜歡的圖片來製作吧～

首先將 SVG 圖檔引入：

<svg version="1.1" id="weather" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" xml:space="preserve">
<g>
	<path fill="#EBBA16" d="M190.915,43.39c-4.79,0-8.678-3.888-8.678-8.678V8.678c0-4.79,3.888-8.678,8.678-8.678	s8.678,3.888,8.678,8.678v26.034C199.593,39.502,195.705,43.39,190.915,43.39z"/>
	<path fill="#EBBA16" d="M43.39,190.915H17.356c-4.79,0-8.678-3.888-8.678-8.678s3.888-8.678,8.678-8.678H43.39 c4.79,0,8.678,3.888,8.678,8.678S48.18,190.915,43.39,190.915z"/>
	<path fill="#EBBA16" d="M86.597,86.597c-2.222,0-4.443-0.85-6.135-2.543L63.288,66.881c-3.393-3.393-3.393-8.878,0-12.271
		c3.393-3.393,8.886-3.393,12.271,0l17.174,17.174c3.393,3.393,3.393,8.878,0,12.271C91.041,85.747,88.819,86.597,86.597,86.597z"/>
	<path fill="#EBBA16" d="M295.233,86.597c-2.222,0-4.443-0.85-6.135-2.543c-3.393-3.393-3.393-8.878,0-12.271l17.174-17.174
		c3.393-3.393,8.886-3.393,12.271,0c3.384,3.393,3.384,8.878,0,12.271l-17.174,17.174C299.668,85.747,297.455,86.597,295.233,86.597z"/>
</g>
<path fill="#ED8A19" d="M125.301,273.868c10.544-16.193,53.881-10.847,74.292-13.529
	c2.977-12.661,9.485-24.151,18.397-33.705c13.59-23.673,39.537-18.363,68.382-18.363c13.702,0,6.344-32.464,17.356-26.034
	c1.762-5.242-4.877-15.438-1.831-19.89c-9.407-52.805-55.478-92.924-110.983-92.924c-62.308,0-112.814,50.506-112.814,112.814
	C78.102,220.039,96.768,253.397,125.301,273.868z"/>
<path fill="#C6E2F7" d="M440.658,220.551c1.302-5.45,2.065-11.108,2.065-16.957c0-40.552-33.159-73.433-74.058-73.433
	c-32.725,0-64.26,17.556-74.066,46.731c-11.012-6.43-19.968-6.673-33.662-6.673c-40.908,0-78.7,32.213-78.7,72.765
	c-40.908,0-69.424,33.54-69.424,74.092s33.159,73.433,74.058,73.433h20.202h78.058h51.139h66.057h13.468
	c48.336,0,87.526-38.851,87.526-86.78C503.322,264.374,476.88,231.181,440.658,220.551z"/>
<g>
<path fill="#366DB6" d="M381.831,494.644c14.379,0,26.034-10.362,26.034-23.144c0,0,0-23.144-26.034-46.28 c-26.034,23.144-26.034,46.28-26.034,46.28C355.797,484.283,367.451,494.644,381.831,494.644z"/>
<path fill="#1F436D" d="M182.237,512c14.379,0,26.034-10.361,26.034-23.144c0,0,0-23.144-26.034-46.28
	c-26.034,23.144-26.034,46.28-26.034,46.28C156.203,501.639,167.858,512,182.237,512z"/>
<polygon fill="#EBBA16" points="381.831,338.441 329.763,338.441 364.475,216.949 242.983,355.797 295.051,355.797 
	260.339,477.288 "/>
</g>
</svg>

透過瀏覽器的開發者工具稍微確認一下每個元素的定位：
幫每個元素使用 id 命名，本次我們要使用 CSS 來調整與管理 SVG 動畫：

<path id="sun" fill="#ED8A19" d="M125.301,273.868c10.544-16.193,53.881-10.847,74.292-13.529
	c2.977-12.661,9.485-24.151,18.397-33.705c13.59-23.673,39.537-18.363,68.382-18.363c13.702,0,6.344-32.464,17.356-26.034
	c1.762-5.242-4.877-15.438-1.831-19.89c-9.407-52.805-55.478-92.924-110.983-92.924c-62.308,0-112.814,50.506-112.814,112.814
	C78.102,220.039,96.768,253.397,125.301,273.868z"/>

然後我們就可以針對每一個不同元素去做 Animation 動畫囉，例如我想要讓太陽動起來：

<g id="sunline">
  <path fill="#EBBA16" d="M190.915,43.39c-4.79,0-8.678-3.888-8.678-8.678V8.678c0-4.79,3.888-8.678,8.678-8.678
    s8.678,3.888,8.678,8.678v26.034C199.593,39.502,195.705,43.39,190.915,43.39z"/>
  <path fill="#EBBA16" d="M43.39,190.915H17.356c-4.79,0-8.678-3.888-8.678-8.678s3.888-8.678,8.678-8.678H43.39
    c4.79,0,8.678,3.888,8.678,8.678S48.18,190.915,43.39,190.915z"/>
  <path fill="#EBBA16" d="M86.597,86.597c-2.222,0-4.443-0.85-6.135-2.543L63.288,66.881c-3.393-3.393-3.393-8.878,0-12.271
    c3.393-3.393,8.886-3.393,12.271,0l17.174,17.174c3.393,3.393,3.393,8.878,0,12.271C91.041,85.747,88.819,86.597,86.597,86.597z"/>
  <path fill="#EBBA16" d="M295.233,86.597c-2.222,0-4.443-0.85-6.135-2.543c-3.393-3.393-3.393-8.878,0-12.271l17.174-17.174
    c3.393-3.393,8.886-3.393,12.271,0c3.384,3.393,3.384,8.878,0,12.271l-17.174,17.174C299.668,85.747,297.455,86.597,295.233,86.597
    z"/>
</g>

#sunline {
	transform-origin: 37% 34%;
	animation: SunRound 5s infinite linear;
}

@keyframes SunRound {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}