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

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

Mary-Kate Olsen

リリース： 2024-10-27 07:17:29

オリジナル

886 人が閲覧しました

How to Replace Deprecating SMIL SVG Animations with CSS or Web Animations?

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

ログイン後にコピー