从HTML5中的SVG图像播放动画

Question

Suppose I have, say, 120 SVG images that are set up in such a way that they resemble the frames of a video. Suppose I want to embed these SVG images into an HTML webpage in so that they play back at a rate that I have full control over (such as 30 or 60 fps, for example). Furthermore, the goal would be to make sure that they are still displayed on screen as vector graphics on the webpage so that no matter how far the user has zoomed in, they still stay looking crisp. So essentially I would have a really short video that is vector as opposed to raster.

So on to the real question; is there any way to efficiently accomplish this in HTML? Or would switching between so many different vector graphics so quickly cause some serious lag issues? If there is a good way to do this, would you please provide an example?

Answer 1

Depending on how complex your SVG is you may find replacing the DOM object fast enough is going to be a challenge without a lot of optimization ( this answer contains a lot of useful detail and comparisons)

A very simple Javascript example of how to achieve this would be to step through an array of SVG items and swap them out on a setInterval timer aligned to your framerate (I'd used the code this is based on for a background loading animation on an AndroidTV app and it worked pretty reliably)

<svg height="200" width="200" id="svg">

</svg>


<script>

var fps = 30
var f = 0
var svgA = [
'<circle cx="50" cy="60" r="40" stroke="black"stroke-width="3" fill="red" />',
'<circle cx="55" cy="62" r="42" stroke="black"stroke-width="4" fill="red" />',
'<circle cx="60" cy="64" r="44" stroke="black"stroke-width="5" fill="red" />',
'<circle cx="65" cy="66" r="46" stroke="black"stroke-width="6" fill="red" />',
'<circle cx="70" cy="68" r="48" stroke="black"stroke-width="7" fill="red" />',
'<circle cx="74" cy="70" r="50" stroke="black"stroke-width="8" fill="red" />',
'<circle cx="77" cy="72" r="48" stroke="black"stroke-width="9" fill="red" />',
'<circle cx="79" cy="74" r="46" stroke="black"stroke-width="8" fill="red" />',
'<circle cx="80" cy="76" r="44" stroke="black"stroke-width="7" fill="red" />',
'<circle cx="79" cy="74" r="46" stroke="black"stroke-width="6" fill="red" />',
'<circle cx="77" cy="72" r="48" stroke="black"stroke-width="5" fill="red" />',
'<circle cx="74" cy="70" r="46" stroke="black"stroke-width="4" fill="red" />',
'<circle cx="70" cy="68" r="44" stroke="black"stroke-width="3" fill="red" />',
'<circle cx="65" cy="64" r="42" stroke="black"stroke-width="2" fill="red" />',
'<circle cx="55" cy="62" r="40" stroke="black"stroke-width="3" fill="red" />'
]

var i = setInterval(function() {nextFrame();}, 1000 / fps);


function nextFrame() {
    document.getElementById("svg").innerHTML = svgA[f];
    f=(f+1)%svgA.length
    if (f==0) {
        clearInterval(i)
    }
}

</script>