Bagaimana untuk Menggantikan Animasi SMIL SVG yang ditamatkan dengan CSS atau Animasi Web?

Menggunakan CSS atau Animasi Web Daripada Animasi SMIL SVG yang Dihentikan

Pengenalan

Disebabkan penamatan SMIL (Disegerakkan Animasi Multimedia Integration Language) dalam SVG (Grafik Vektor Boleh Skala), adalah penting untuk mencari pendekatan alternatif menggunakan CSS atau animasi Web. Peralihan ini membantu meningkatkan prestasi dan keserasian merentas penyemak imbas moden.

Menggantikan Kesan Hover

• Alih keluar teg set SMIL.

• Tambah Peraturan tuding CSS:

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

Menggantikan Animasi Skala

• Gunakan CSS untuk penskalaan:

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

• Perhatikan bahawa ini mungkin mengakibatkan tingkah laku yang sedikit berbeza berbanding animasi SMIL.

Menggantikan Animasi Klik

• Gunakan kerangka utama CSS untuk menghidupkan peralihan apabila elemen diklik:

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

• Sekali lagi, tingkah laku mungkin berbeza sedikit daripada animasi SMIL asal.

Contoh Berfungsi

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

Menyimpan Animasi Sedia Ada

Pautan yang disediakan mengandungi animasi yang lebih kompleks daripada contoh dalam soalan. Menukarnya kepada animasi CSS / Web akan memerlukan lebih banyak usaha dan kod tersuai. Adalah disyorkan untuk menggunakan poliisi SMIL yang dinyatakan dalam jawapan di bawah untuk mengekalkan animasi SMIL sedia ada semasa beralih kepada sokongan penyemak imbas moden.

Atas ialah kandungan terperinci Bagaimana untuk Menggantikan Animasi SMIL SVG yang ditamatkan dengan CSS atau Animasi Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!