Question

我有一个自包含的.svg文件，正在将其加载到<img>元素中。 SVG通过嵌入式CSS进行动画处理，并设置为不循环。

当我添加第一个<img>且SVG为src时，动画播放效果非常好。如果我在动画的第一个<img>之后添加了另一个动画，它将无法播放。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 128 128" style="white-space: pre;">
    <style>
    @keyframes a0_t {
        0% {
            transform: translate(64px,64px) rotate(0deg) translate(-27.5px,-27.5px); 
        } 100% {
            transform: translate(64px,64px) rotate(180deg) translate(-27.5px,-27.5px); 
        } 
     }
    </style>
    <rect width="55" height="55" fill="#dddddd" stroke="none" transform="translate(64,64) translate(-27.5,-27.5)" style="animation: a0_t 2s linear both;"/>
</svg>

SVG动画只能在一个<img/>元素中播放

0 个答案: