더 이상 사용되지 않는 SMIL SVG 애니메이션을 CSS 또는 웹 애니메이션으로 대체하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

더 이상 사용되지 않는 SMIL SVG 애니메이션을 CSS 또는 웹 애니메이션으로 대체하는 방법은 무엇입니까?

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 또는 웹 애니메이션으로 교체

SMIL SVG 애니메이션 지원 중단으로 인해 CSS 또는 웹 애니메이션을 사용하는 대체 접근 방식 최신 브라우저에서 더 나은 성능과 호환성을 위해서는 웹 애니메이션을 권장합니다. 언급된 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'); });

로그인 후 복사