Wie ersetzt man veraltete SMIL-SVG-Animationen durch CSS- oder Web-Animationen?

Verwendung von CSS- oder Webanimationen anstelle der veralteten SMIL-SVG-Animation

Einführung

Aufgrund der veralteten Funktion von SMIL (Synchronized Um Animationen in SVG (Scalable Vector Graphics) zu erstellen, ist es wichtig, alternative Ansätze mithilfe von CSS oder Webanimationen zu finden. Dieser Übergang trägt dazu bei, die Leistung und Kompatibilität zwischen modernen Browsern zu verbessern.

Hover-Effekt ersetzen

• SMIL-Set-Tags entfernen.

• Hinzufügen CSS-Hover-Regeln:

  <code class="css">.element_tpl:hover {
    stroke-opacity: 0.5;
  }</code>

Skalenanimation ersetzen

• CSS für die Skalierung verwenden:

  <code class="css">.element_tpl {
    transform: scale(1);
  }
  
  .element_tpl:active {
    transform: scale(1.1); 
  }</code>

• Beachten Sie, dass dies zu einem etwas anderen Verhalten als bei der SMIL-Animation führen kann.

Klickanimation ersetzen

• Verwenden Sie CSS-Keyframes, um einen Übergang zu animieren, wenn auf ein Element geklickt wird:

  <code class="css">@keyframes click-anim {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.15);
    }
  }
  
  .element_tpl {
    animation: click-anim 0.2s forwards;
    animation-delay: 0.2s;
  }</code>

• Auch hier kann das Verhalten geringfügig von der ursprünglichen SMIL-Animation abweichen.

Arbeitsbeispiel

<code class="html"><g id="switcher" cursor="pointer" stroke-width="0.15">
    <g transform="scale(1,1.375)">
        <g>
            <rect x="-0.5" y="-0.5" width="1" height="1" stroke="white" pointer-events="none"></rect>
            <rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
                <line x1="0" y1="-0.25" x2="0" y2="0.25" stroke-width="0.17" stroke-linecap="round" pointer-events="none"></line>
            </rect>
        </g>
    </g>
</g></code>

<code class="css">#switcher {
    transform: scale(1);
}

#switcher:hover {
    stroke-opacity: 0.5;
}

#switcher:active {
    transform: scale(1.1); 
}

@keyframes click-anim {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.15);
    }
}

#switcher:active {
    animation: click-anim 0.2s forwards;
    animation-delay: 0.2s;
}</code>

Vorhandene Animationen speichern

Die bereitgestellten Links enthalten Animationen, die komplexer sind als die Beispiele in der Frage. Die Konvertierung in CSS-/Webanimationen erfordert mehr Aufwand und benutzerdefinierten Code. Es wird empfohlen, die in der Antwort unten erwähnte SMIL-Polyfüllung zu verwenden, um vorhandene SMIL-Animationen beim Übergang zur modernen Browserunterstützung beizubehalten.

Das obige ist der detaillierte Inhalt vonWie ersetzt man veraltete SMIL-SVG-Animationen durch CSS- oder Web-Animationen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!