Ini adalah sedikit perkara, saya hanya perlu melakukannya sendiri dan mendapati ia membingungkan jadi saya fikir saya akan membuat keseluruhan video di atasnya.
Masalahnya, tidak semuanya ada di SVG.
hebat kerana ia boleh menjadi apa sahaja. Tetapi sintaks untuknya sedikit lebih kompleks daripada bentuk lain. Jadi (mungkin atas sebab itu?) Ilustrator selalu mengeluarkan bentuk dalam SVG dengan elemen yang paling sesuai. Segi empat tepat adalah
, bentuk lain yang hanya terdiri dari garis lurus adalah
, atau jika bentuk terbuka a
, dll.
Itu tidak masalah, kecuali kaedah DOM untuk bentuknya berbeza-beza. Elemen jalan mempunyai kaedah yang dipanggil getTotalLength()
yang membolehkan anda mengetahui berapa lama jalan tersebut. Itu cukup keren dan kadang-kadang berguna, tetapi anda tidak boleh melakukannya hanya pada elemen lain.
Salah satu sebab anda mungkin ingin mengetahui panjangnya adalah kerana anda bermaksud menghidupkannya sehingga bentuknya "menarik diri" - kesan reka bentuk kecil yang sejuk (koleksi contoh). Anda boleh melakukannya dalam CSS, tetapi ada baiknya menggunakan beberapa JavaScript untuk menerapkan CSS itu sehingga dapat menjarakkan jarak yang sempurna setiap saat.
Oleh itu, katakan anda mahu melakukan kesan lukisan, tetapi bentuknya sedemikian rupa sehingga JavaScript gagal. Anda boleh mengubah poligon itu menjadi jalan, tanpa mengubahnya secara visual, dengan hanya menambahkan titik yang mempunyai pegangan bezier. Seperti dalam, klik dengan alat Pen dan seret sehingga pemegangnya keluar dan sejajarkan pegangan tepat di sepanjang garis yang sudah ada. Keberadaan titik itu akan menjadikannya sebagai
output
Sekiranya anda melakukan ini dengan banyak, ada alat yang dipanggil Poly2Path yang berfungsi, dan tidak memerlukan titik yang berlebihan.