Animate SVG Path berubah dalam CSS

SVG's<path></path> Unsur -unsur menyediakan fungsi lukisan yang kuat, dan kadang -kadang saya cuba menggunakannya untuk menarik beberapa bentuk. Walaupun saya hanya tahu bulu tentang fungsi penuhnya, sudah cukup bagi saya untuk mencuba beberapa kesan animasi yang menarik. Semua arahan sintaks linear (seperti L ) sangat mudah dan mudah difahami, manakala perintah lengkung Q juga agak intuitif. Mengehadkan lukisan ke viewBox="0 0 100 100" , nampaknya sukar untuk menarik graf mudah.

Berikut adalah contoh klasik yang menarik grafik menggunakan semua arahan asas dan animasi menggunakan CSS (penyemak imbas Chromium sahaja):

Nampaknya pelik tetapi nyata:

<svg viewbox="0 0 10 10"><path d="M2,2 L8,8"></path></svg>

 SVG: Hover Path {
  Peralihan: 0.2s;
  D: Path ("M8,2 l2,8");
}

Baru -baru ini, saya memerlukan elemen UI yang ikonnya akan berbeza mengikut negeri. Ia seperti bentuk "log", keadaan lalai adalah lurus, sedikit seperti menu hamburger (hanya empat baris, lebih seperti garis teks), dan kemudian pelbagai negeri lain.

1. Lalai (lalai)
2. Aktiviti (aktif)
3. Kejayaan (Kejayaan)
4. Ralat

Pertama, saya menulis mesin negeri terhingga yang sangat kompleks:

 penunjuk const = document.QuerySelector ("elemen");

biarkan currentState = indicator.dataset.state;

penunjuk.addeventListener ("klik", () => {
  Biarkan NextState = "";

  jika (currentState == "lalai") {
    NextState = "Active";
  } else if (currentState == "aktif") {
    NextState = "Kejayaan";
  } else if (currentState == "kejayaan") {
    NextState = "ERROR";
  } else {
    NextState = "Default";
  }

  indikator.dataset.state = NextState;
  CurrentState = NextState;
});

Ini membuka pintu untuk menetapkan gaya menggunakan atribut data:

 .element {
  & [data-state = "default"] {
  }
  & [data-state = "aktif"] {
  }
  & [data-state = "kejayaan"] {
  }
  & [data-state = "error"] {
  }
}

Jadi, jika elemen saya bermula dengan keadaan lalai empat baris:

<div data-state="DEFAULT">
  <svg viewbox="0 0 100 100"><path d="M0, 20 Q50, 20 100, 20"></path><path d="M0, 40 Q50, 40 100, 40"></path><path d="M0, 60 Q50, 60 100, 60"></path><path d="M0, 80 Q50, 80 100, 80"></path></svg>
</div>

... Saya boleh menukar jalan ke negeri -negeri lain di CSS. Sebagai contoh, saya boleh menukar empat garis lurus ini menggunakan CSS.

Perhatikan bahawa empat "baris" ini mudah mengandungi titik lengkung yang tidak digunakan. Hanya laluan dengan nombor yang sama dan jenis mata boleh menjadi animasi dalam CSS. Menambah titik lengkung membuka lebih banyak kemungkinan.

Empat laluan baru ini sebenarnya menarik bentuk yang serupa dengan bulatan!

 .DITOR-INDICATOR {
  & [data-state = "aktif"] {
    .icon {
      : nth-anak (1) {
        D: Path ("M50, 0 Q95, 5 100,50");
      }
      : nth-anak (2) {
        D: Path ("M100, 50 Q95, 95 50,100");
      }
      : nth-anak (3) {
        D: Path ("M50,100 Q5, 95 0, 50");
      }
      : nth-anak (4) {
        D: Path ("M0, 50 Q5, 5 50, 0");
      }
    }
  }
}

Untuk negeri -negeri lain, saya menarik tanda kasar (menunjukkan kejayaan) dan tanda seru yang kasar (menunjukkan kegagalan).

Demo (penyemak imbas Chromium sahaja), anda boleh mengklik padanya untuk menukar status: (pautan demo atau kod harus dimasukkan di sini, tetapi kerana saya tidak dapat membuat kandungan dinamik, hanya keterangan)

Oleh kerana Firefox dan Safari tidak menyokong d: path() dalam CSS, saya akhirnya tidak menggunakannya. Bukannya ia tidak boleh bernyawa, ia tidak berfungsi, jadi ia tidak tersedia untuk saya. Saya akhirnya menggantikan ikon dalam keadaan yang berbeza.

Jika anda memerlukan ubah bentuk bentuk di seluruh pelayar, kami mempunyai artikel lengkap mengenai perkara ini. (Pautan artikel harus dimasukkan di sini, tetapi kerana saya tidak dapat memberikan pautan itu, saya hanya dapat menggambarkannya)

Atas ialah kandungan terperinci Animate SVG Path berubah dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!