SVG 動畫 fill 屬性

admin發表於2018-10-25
SVG動畫

動畫元素的fill屬性用於規定動畫結束之後的狀態。

具有兩個屬性值：

（1）.freeze：動畫結束以後，動畫保持最後狀態。

（2）.remove：動畫結束之後，恢復到初始狀態。

特別說明：

（1）.此屬性作用類同於CSS的animation-fill-mode屬性。

（2）.圖形元素的fill屬性用於填充，與本文介紹的fill屬性作用不同。

關於動畫元素更多內容參閱SVG animation動畫一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
    margin: 0px;
    padding: 0px;
}
svg {
    border:1px solid blue;
}
</style>
</head>
<body>
<svg width="700" height="350" >
  <rect
    x="50" y="50"
    width="100" height="50"
    fill="red">
    <animate attributeType="XML"
      attributeName="x"
      from="50" to="400"
      dur="5s"
      fill="remove">
    </animate>
  </rect>
  <rect
    x="160" y="160"
    width="100" height="50"
    fill="red">
    <animate attributeType="XML"
      attributeName="x"
      from="50" to="400"
      dur="5s"
      fill="freeze">
    </animate>
  </rect>
</svg>          
</body>
</html>

上面程式碼演示了fill屬性的兩個不同屬性值的作用。

第一個矩形動畫完成後，狀態恢復到初始狀態，第二個矩形會保持動畫結束後的狀態。

相關文章