如何用 CSS 或 Web 動畫取代已棄用的 SMIL SVG 動畫？

使用CSS或Web動畫代替已棄用的SMIL SVG動畫

簡介

由於SMIL（同步）的簡介

由於SMIL（同步）的簡介

由於SMIL（同步）的介紹棄用SVG（可擴展向量圖形）中的多媒體整合語言）動畫，必須找到使用CSS 或Web 動畫的替代方法。此轉換有助於提高現代瀏覽器的效能和相容性。
• 取代懸停效果

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

刪除 SMIL 設定標籤。

新增CSS懸停規則：

• 替換縮放動畫

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

• 替換縮放動畫

使用CSS進行縮放：

請注意，與SMIL 動畫相比，這可能會導致行為略有不同。

• 替換點擊動畫

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

使用CSS 關鍵影格在點擊元素時設定轉場動畫：

同樣，該行為可能與原始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 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"/>
            </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 / Web 動畫將需要更多的努力和自訂程式碼。建議使用下面答案中提到的 SMIL polyfill 來維護現有的 SMIL 動畫，同時過渡到現代瀏覽器支援。

以上是如何用 CSS 或 Web 動畫取代已棄用的 SMIL SVG 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！