SMIL のSVGファイルのアニメーションがループしないようにしたい - HTML

SMIL のSVGファイルのアニメーションがループしないようにする方法を紹介します。

概要

こちらの記事では、SMILのSVGファイルをページに表示してアニメーションをする方法を紹介しました。紹介した方法ではアニメーションが最後まで再生されると、最初に戻り繰り返し再生される動作になります。
利用用途によっては、アニメーションを繰り返さないようにしたい場合があります。この記事では、SMILのSVGファイルのアニメーションを繰り返さないようにする方法を紹介します。

手順

SVGファイルの編集

SMILのSVGファイルでアニメーションが繰り返される原因は、SVGファイル内にSMILの繰り返しの処理が記述されているため、 SVGファイル内の繰り返し処理を1回に設定します。
SVGファイル内の繰り返し処理は、repeatCount 属性に設定されています。

テキストエディタでSVGファイルを開きます。

repeatCountで検索します。検索にヒットしました。右側の値を確認すると、"indefinete"となっています。値が不定の場合、ループする動作になります。

repeatCountの値を "1"に設定します。

repeatCount 属性は複数カ所ある場合がありますので、すべてのrepeatCount の値を "1" に設定します。

コード

以下のHTMLファイルを作成します。先の手順で変更したSVGの画像をimgタグで表示します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <h2>SMIL SVGのデモ</h2>
  <div>
    <img src="data-no-repeat.svg" />
  </div>
</body>
</html>