這是熟悉 SVG 語(yǔ)法和真實(shí)動(dòng)畫的一個(gè)很好的練習(xí)。我們將使用一個(gè)預(yù)制的 SVG 心臟，提醒自己是如何viewBox工作的，然后添加一個(gè) animateTransform元素來(lái)控制跳動(dòng)運(yùn)動(dòng)。在最初的“簡(jiǎn)單”方法之后，我們將討論它有什么問(wèn)題并進(jìn)行一些改進(jìn)。最后，我還將向您展示一些替代的跳動(dòng)心臟動(dòng)畫。讓我們開(kāi)始！
 
1. 創(chuàng)建一個(gè)心形圖標(biāo)
在您選擇的矢量工具中，繪制一個(gè)簡(jiǎn)單的心形圖標(biāo)。它不需要是完美的，但為了方便起見(jiàn)，讓它成為一條連續(xù)的路徑。我在 100x100 像素的畫布上創(chuàng)建了我的，幾乎填滿了整個(gè)東西。

2.開(kāi)始寫SVG

在 Codepen（或 blanco HTML 文件）中，首先編寫 SVG 元素的基本內(nèi)容：

1 2 3

<svg width="100" height="100" viewBox="0 0 100 100"><font></font>   <font></font> </svg>

在這里，我們?yōu)?SVG 賦予了與原始畫布相同的高度和寬度。我們還將 viewBox 設(shè)置為0 0 100 100. 這意味著我們查看 SVG 的窗口從坐標(biāo) 0 0（左上角）開(kāi)始，尺寸為 100x100px，因此它與我們的 SVG 完美匹配。
為了清楚地看到您正在處理的內(nèi)容，添加一個(gè) CSS 規(guī)則來(lái)為 SVG 背景著色： 

1 2 3

svg {<font></font>   background: blue;<font></font> }

讓我們也使用 flexbox 將我們正在查看的內(nèi)容居中：

1 2 3 4 5 6

body {<font></font>   height: 100vh;<font></font>   display: flex;<font></font>   align-items: center;<font></font>   justify-content: center;<font></font> }

3. 添加心路

現(xiàn)在我們需要在 SVG 中嵌套一個(gè)路徑元素。從空路徑開(kāi)始，帶有fill顏色和空d：

1	<path fill="tomato" d="">

定義了一個(gè)繪制的d路徑，所以讓我們添加我們的路徑坐標(biāo)。在您粘貼到文本編輯器中的 SVG 片段中，從d屬性中獲取所有內(nèi)容并將其粘貼到我們的空屬性中。你應(yīng)該得到一個(gè)看起來(lái)像這樣的混亂字符串：

1 2	<path fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"><font></font> </path>

所有這些都將創(chuàng)建以下內(nèi)容：

4. 讓你的心成長(zhǎng)

我想要一顆更大的心。
通過(guò)將 SVG 的寬度和高度屬性加倍，width="200" height="200"我們將加倍整個(gè)物體的大小?；蛘呶覀兛梢詫⑺袃?nèi)容縮放 150%  width="150" height="150"?；蛘呤瞧渌麞|西。我們不需要觸摸 viewBox 的值，因?yàn)樗鼈儠?huì)相對(duì)于我們剛剛更改的 Viewport 保持不變。

5. 添加一點(diǎn)動(dòng)畫

為了使跳動(dòng)的心臟動(dòng)畫化，我們將使用一個(gè)animateTransform嵌套在 SVG 中的元素。 
首先在 SVG 中添加元素，作為路徑的兄弟：

1 2 3 4 5 6

<animateTransform <font></font>     attributeName="transform" <font></font>     type="scale" <font></font>     dur="1s" <font></font>     repeatCount="indefinite"><font></font> </animateTransform>

這將為父元素設(shè)置動(dòng)畫，即：整個(gè) <svg>. 這在很多情況下都不合適，最好為 中的元素設(shè)置動(dòng)畫，但<svg>這種方法對(duì)我們來(lái)說(shuō)效果很好。為了復(fù)習(xí) animateTransform 的工作原理，Kezz（像往常一樣）為您介紹了：
我們使用的屬性是不言自明的。我們正在創(chuàng)建一個(gè)持續(xù)時(shí)間為 1 秒的比例變換，它將無(wú)限期地重復(fù)。 

向轉(zhuǎn)換添加值

現(xiàn)在我們需要添加一個(gè)值列表，所以它知道要設(shè)置多少動(dòng)畫：

1 2 3 4 5 6 7

<animateTransform<font></font>       attributeName="transform"<font></font>       type="scale"<font></font>       dur="1s"<font></font>       values="1; 1.5; 1.25; 1.5; 1.5; 1;"<font></font>       repeatCount="indefinite"><font></font> </animateTransform>

所以這里的心臟從正常大小 ( 1) 開(kāi)始，然后縮放到1.5正常大小，然后稍微縮小到1.25，然后回到1.5，依此類推。這些值給了我們跳動(dòng)的效果。

6. 更好的解決方案

改變我們的方式有幾個(gè)原因，第一個(gè)（重要的）原因是：這在許多移動(dòng)瀏覽器上不起作用。iOS Safari 和 Chrome 只會(huì)表現(xiàn)出一動(dòng)不動(dòng)的心，因?yàn)樗鼈儾幌矚ganimateTransform被應(yīng)用到<svg>元素上。
“保持我跳動(dòng)的心”——斯汀
此外，我們正在為整個(gè) SVG 制作動(dòng)畫；在內(nèi)容動(dòng)畫<svg>化的同時(shí)保持相同的比例會(huì)更有用。這是可能的——我們需要稍微調(diào)整一下坐標(biāo)系——但這是可能的。

添加包裝元素并縮小

首先將我們的<path>和<animateTransform>元素包裝在一個(gè)組<g>元素中。這<g>就是現(xiàn)在動(dòng)畫的內(nèi)容：

1 2 3 4 5 6

<svg><font></font>     <g><font></font>         <path></path><font></font>         <animateTransform ></animateTransform><font></font>     </g><font></font> </svg>

我還想通過(guò)增加viewBox. 這將防止我們的心超越界限，<svg>從而掩蓋它。

1	<svg width="150" height="150" viewBox="0 0 200 200">

在這一點(diǎn)上，<svg>再次給背景顏色是個(gè)好主意，所以我們可以看到發(fā)生了什么：

好吧，它有效，我們有一個(gè) SVG 心跳，但坐標(biāo)讓我們感到困惑。group 元素從 0、0 縮放，而我們需要我們的心以某種方式從中心縮放。我們可以通過(guò)對(duì) 應(yīng)用一個(gè)變換<path>，將它的一半高度向上移動(dòng)一半寬度向左移動(dòng)來(lái)做到這一點(diǎn)：

1	<path transform="translate(-50 -42.5)"

結(jié)論