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

더 이상 사용되지 않는 SMIL SVG 애니메이션 대신 CSS 또는 웹 애니메이션 사용

소개

SMIL(Synchronized 멀티미디어 통합 언어) 애니메이션을 SVG(Scalable Vector Graphics)로 변환하려면 CSS나 웹 애니메이션을 사용하는 대체 접근 방식을 찾는 것이 중요합니다. 이러한 전환은 최신 브라우저 전반에서 성능과 호환성을 향상시키는 데 도움이 됩니다.

호버 효과 교체

• SMIL 설정 태그를 제거하세요.

• 추가 CSS 호버 규칙:

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

크기 조절 애니메이션 교체

• 크기 조절에 CSS 사용:

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

• SMIL 애니메이션과 비교하여 동작이 약간 다를 수 있습니다.

클릭 애니메이션 교체

• CSS 키프레임을 사용하여 요소를 클릭할 때 전환에 애니메이션을 적용합니다.

  <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>

• 다시 말하지만 동작은 원본 SMIL 애니메이션과 약간 다를 수 있습니다.

작업 예제

<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>

기존 애니메이션 저장

제공된 링크에는 질문의 예제보다 더 복잡한 애니메이션이 포함되어 있습니다. CSS/웹 애니메이션으로 변환하려면 더 많은 노력과 사용자 정의 코드가 필요합니다. 최신 브라우저 지원으로 전환하는 동안 기존 SMIL 애니메이션을 유지하려면 아래 답변에 언급된 SMIL 폴리필을 사용하는 것이 좋습니다.

위 내용은 더 이상 사용되지 않는 SMIL SVG 애니메이션을 CSS 또는 웹 애니메이션으로 대체하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!