廃止予定の SMIL SVG アニメーションを CSS または Web アニメーションに置き換えるにはどうすればよいですか?

SMIL SVG アニメーションの非推奨と CSS または Web アニメーションによる置き換え

SMIL SVG アニメーションの非推奨により、CSS または Web アニメーションを使用した代替アプローチが使用されます。最新のブラウザでのパフォーマンスと互換性を向上させるために、Web アニメーションをお勧めします。ここでは、前述の SMIL アニメーションを変換する方法を説明します。

1.マウスオーバー時のホバー効果

同じ効果を実現するには、SMIL アニメーション タグを CSS ホバー疑似クラスに置き換えます。

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

2.変更がコミットされた後にアニメーションをスケールする

animate タグを使用せずにこの効果を実装するには、テンプレートで初期スケール プロパティを設定し、CSS トランジションを使用してスケーリングをアニメーション化します。

/* 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.クリック時のスケールアップとスケールダウン

この効果には、CSS トランジションと JavaScript イベント ハンドラーの組み合わせを使用できます。

/* 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'); });

作業例

これは変換された CSS 効果を示す実際の例: https://jsfiddle.net/7e2jeet0/

以上が廃止予定の SMIL SVG アニメーションを CSS または Web アニメーションに置き換えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。