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

Veraltete SMIL-SVG-Animation und Ersatz durch CSS oder Web-Animationen

Aufgrund der veralteten SMIL-SVG-Animation sind alternative Ansätze mit CSS oder Webanimationen werden für eine bessere Leistung und Kompatibilität in modernen Browsern empfohlen. Hier finden Sie eine Erklärung zur Konvertierung der genannten SMIL-Animationen:

1. Hover-Effekt bei Mouseover

Ersetzen Sie die SMIL-Animations-Tags durch eine CSS-Hover-Pseudoklasse, um den gleichen Effekt zu erzielen.

/* Original SMIL */
<set attributeName="stroke-opacity" .../>
<set attributeName="stroke-opacity" .../>
/* CSS Equivalent */
.element_tpl:hover {
  stroke-opacity: 0.5;
}

2. Animation nach übernommener Änderung skalieren

Um diesen Effekt ohne Verwendung des Animate-Tags zu implementieren, können Sie die anfängliche Skalierungseigenschaft in Ihrer Vorlage festlegen und dann CSS-Übergänge verwenden, um die Skalierung zu animieren.

/* Original SMIL */
<animateTransform .../>
/* CSS Equivalent */
@media (all) {
  .element_tpl {
    transform: scale(1, 1.375);
    transition: transform 0.5s ease-in-out;
  }
  .element_tpl:hover {
    transform: scale(1.12, 1.375);
  }
}

3. Per Klick vergrößern und verkleinern

Für diesen Effekt kann eine Kombination aus CSS-Übergängen und JavaScript-Ereignishandlern verwendet werden.

/* Original SMIL */
<animateTransform .../>
<animateTransform .../>
/* CSS Equivalent */
@media (all) {
  .element_tpl {
    transition: transform 0.2s ease-in-out;
  }
  .element_tpl:active {
    transform: scale(1.1);
  }
}
/* JavaScript Event Handlers */
const element = document.querySelector('.element_tpl');
element.addEventListener('mousedown', () => { element.classList.add('active'); });
element.addEventListener('mouseup', () => { element.classList.remove('active'); });

Arbeitsbeispiel

Hier ist ein Arbeitsbeispiel, das die konvertierten CSS-Effekte zeigt: https://jsfiddle.net/7e2jeet0/

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!