SMIL のSVGファイルのアニメーションがループしないようにしたい
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>
実行結果
HTMLファイルをWebブラウザで読み込みます。ページを読み込むとSVG画像のアニメーションが始まります。
徐々に画像が大きくなるアニメーションが再生されます。
アニメーションが最後まで再生されても、元に戻らず、最後の状態の画像が表示され続ける動作になります。
SMIL のSVGファイルのアニメーションがループしない動作にできました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最近は生成AIの画像生成の沼に沈んでいる。
