由于svg不支持动画,我做了个替代方法如下
step 1:先把多帧gif分成单帧并透明化
<image id="gif0" width=... xlink:href="data:image/gif;base64,... />
<image id="gif1" width=... xlink:href="data:image/gif;base64,... />
<image id="gif2" width=...xlink:href="data:image/gif;base64,... />
<image id="gif3" width=... xlink:href="data:image/gif;base64,... />
..
step 2: 合成
<defs>
<g id="animegif7" transform="translate(0,0) scale(1.0, 1.0)">
<g>
<use xlink:href="#gif0"/><animate attributeName="visibility" values="visible;hidden;hidden;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#gif1"/><animate attributeName="visibility" values="hidden;visible;hidden;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#gif2"/><animate attributeName="visibility" values="hidden;hidden;visible;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#gif3"/><animate attributeName="visibility" values="hidden;hidden;hidden;visible;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
</g>
</g>
</defs>
step 3: 使用动画
<use xlink:href="#animegif7"/>
step 1:先把多帧gif分成单帧并透明化
<image id="gif0" width=... xlink:href="data:image/gif;base64,... />
<image id="gif1" width=... xlink:href="data:image/gif;base64,... />
<image id="gif2" width=...xlink:href="data:image/gif;base64,... />
<image id="gif3" width=... xlink:href="data:image/gif;base64,... />
..
step 2: 合成
<defs>
<g id="animegif7" transform="translate(0,0) scale(1.0, 1.0)">
<g>
<use xlink:href="#gif0"/><animate attributeName="visibility" values="visible;hidden;hidden;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#gif1"/><animate attributeName="visibility" values="hidden;visible;hidden;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#gif2"/><animate attributeName="visibility" values="hidden;hidden;visible;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#gif3"/><animate attributeName="visibility" values="hidden;hidden;hidden;visible;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
</g>
</g>
</defs>
step 3: 使用动画
<use xlink:href="#animegif7"/>