別のアプローチとして、
アニメーションは機能しているが、ファイルをセットアップするのに生産量が多すぎるという問題がある場合は、テンプレートを使用して SVG を生成できます。
Grunt.Jsのようなものを使用して、ディレクトリ内のすべての画像を読み取り、アンダースコア テンプレートを使用して、ファイルパスの配列から既にセットアップした方法で SVG フレームを構築します。
これらのコード スニペットはそのままでは機能しない可能性がありますが、かなり近いものです。
ここで、grunt ファイルはフォルダー内のファイルを取得し、それらが画像であるかどうかを確認してから、それらを配列にプッシュします。
// gruntfile.js //
var fs = require('fs');
var path = require('path');
var _ = require("underscore");
grunt.registerTask('Build Animated SVG', function () {
var template = grunt.file.read("/path to SVG underscore template/"); //see SVG section below.
var frames = [];
var pathtoframes = "mypath";
var mySVG = "mysvg.svg";
fs.readdirSync(path.resolve(pathtoframes)).forEach(function (file) {
if (filetype == "svg" || filetype == "png" || filetype == "jpg" || filetype == "gif") {
var frame = {};
frame.src = pathtoframes + "/" + file;
frames.push(frame);
}
});
var compiledSVG = _.template(template, {frames:frames});
grunt.file.write(path.resolve(pathtoframes) + "/compiled_" + mySVG, compiledSVG);
});
このテンプレートは grunt ファイルによって読み込まれ、アンダースコアは各ファイルをループして大きな文字列に書き込みます。次に、Grunt はそれを読み込み可能な SVG として保存します。
<!-- SVG underscore template -->
<svg version="1.1" baseProfile="tiny" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<% _.each(frames, function(frame, index){ %>
<image width="320" height="240" xlink:href="<%= frame.src %>">
<animate
id='frame_<%= index %>'
attributeName='display'
values='none;inline'
dur='0.5s'
fill='freeze'
begin="0.5s"
repeatCount="indefinite"
/>
</image>
<% } %>
</svg>
