6 SVG biasa gagal (dan bagaimana untuk memperbaikinya)

Saya ditanya baru -baru ini bagaimana untuk debug SVG dalam talian. Kerana ia adalah sebahagian daripada DOM, kita boleh menyemak mana -mana SVG dalam talian di DevTools dalam mana -mana pelayar. Oleh kerana itu, kami dapat skala perkara dan melihat sebarang isu atau peluang yang berpotensi untuk pengoptimuman SVG.

Tetapi kadang -kadang, kita tidak dapat melihat SVG kita sama sekali. Dalam kes ini, saya mencari enam aspek khusus apabila debugging.

1

Apabila menggunakan SVG, ViewBox adalah titik kekeliruan yang sama. Secara teknikal, tidak mengapa menggunakan SVG dalam talian tanpa kotak viewbox, tetapi kami kehilangan salah satu kelebihan yang paling penting: berskala dengan bekas. Pada masa yang sama, jika dikonfigurasikan secara tidak wajar, ia mungkin memudaratkan kami, mengakibatkan tanaman yang tidak dijangka.

Apabila unsur -unsur dipotong, mereka berada di sana - mereka hanya sebahagian daripada sistem koordinat yang tidak dapat kita lihat. Jika kita membuka fail dalam beberapa program penyuntingan grafik, ia mungkin kelihatan seperti ini:

Apakah penyelesaian yang paling mudah? Tambah

ke SVG, sama ada dalam lembaran gaya, dalam atribut gaya sebaris, atau secara langsung sebagai SVG untuk mewakili sifat. Walau bagaimanapun, jika kita juga menggunakan warna latar belakang untuk SVG, atau mempunyai unsur -unsur lain di sekelilingnya, perkara mungkin kelihatan sedikit salah. Dalam kes ini, pilihan terbaik adalah untuk mengedit kotak viewbox untuk menunjukkan bahagian sistem koordinat tersembunyi:

overflow="visible" Mengenai Viewbox, terdapat beberapa perkara tambahan yang patut dibincangkan:

Bagaimana kerja viewbox?

SVG adalah kanvas tak terhingga, tetapi kita dapat mengawal apa yang kita lihat dan bagaimana kita melihatnya melalui viewport dan viewbox.

Viewport

adalah bingkai tetingkap pada kanvas tak terhingga. Dimensinya ditakrifkan oleh sifat dan , atau ditakrifkan menggunakan sifat width dan height yang sepadan dalam CSS. Kami boleh menentukan mana -mana unit panjang yang kami mahu, tetapi jika kami menyediakan nombor tanpa unit, mereka lalai kepada piksel. width height

Viewbox

ditakrifkan oleh empat nilai. Dua yang pertama adalah titik permulaan sudut kiri atas (nilai X dan Y, nombor negatif dibenarkan). Saya menyuntingnya untuk menghidupkan semula. Dua yang terakhir adalah lebar dan ketinggian sistem koordinat dalam viewport - di sini kita boleh mengedit skala grid (kita akan berbincang dalam bahagian skala). Berikut adalah penanda yang dipermudahkan yang menunjukkan kotak pandangan SVG dan

dan

sifat yang ditetapkan pada <svg></svg>: width height

Cabut semula

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

Jadi, ini:

... peta untuk ini:

<svg viewbox="0 0 700 700"></svg>

Viewport yang kita lihat bermula di mana 0 pada paksi x dan 0 pada paksi-y bersilang.

<svg viewbox="start-x-axis start-y-axis width height"></svg>

Tukar kandungan ini:

... hingga ke tahap ini:

<svg viewbox="0 0 700 700"></svg>

... lebar dan ketinggian tetap sama (700 unit setiap satu), tetapi titik permulaan sistem koordinat kini berada pada 300 mata pada paksi x dan 200 mata pada paksi-y.

<svg viewbox="300 200 700 700"></svg>

Dalam video di bawah, saya menambah merah <circle></circle> ke SVG, dengan pusat pada 300 mata pada paksi X dan 200 mata pada paksi-y. Perhatikan bahawa menukar koordinat viewbox ke nilai yang sama juga akan mengubah penempatan bulatan ke sudut kiri atas bingkai, manakala saiz rendering SVG tetap sama (700 × 700). Apa yang saya lakukan ialah "menghidupkan semula" dengan Viewbox.

zoom

kita boleh menukar dua nilai terakhir dalam kotak viewbox untuk mengezum masuk atau keluar dari imej. Semakin besar nilai, lebih banyak unit SVG ditambah ke viewport, menghasilkan imej yang lebih kecil. Jika kita mahu mengekalkan nisbah 1: 1, lebar dan ketinggian viewbox kita mesti sepadan dengan nilai lebar dan ketinggian pandangan kita.

Mari lihat apa yang berlaku apabila menukar parameter ini dalam Illustrator. Artboard adalah viewport, yang diwakili oleh persegi putih 700-piksel. Segala -galanya di luar kawasan ini adalah kanvas SVG yang tidak terhad dan akan dipotong secara lalai.

Rajah 1 berikut menunjukkan titik biru yang terletak pada 900 pada paksi x dan 900 pada paksi-y. Jika saya menukar dua nilai viewbox terakhir dari 700 hingga 900, seperti yang ditunjukkan di bawah:

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

... maka titik -titik biru hampir sepenuhnya kembali untuk melihat, seperti yang ditunjukkan dalam Rajah 2 di bawah. Imej kami dikurangkan kerana kami meningkatkan nilai viewbox, tetapi dimensi lebar dan ketinggian sebenar SVG tetap sama, dan titik biru kembali lebih dekat ke kawasan yang tidak dikenali.

Terdapat persegi merah jambu sebagai bukti bagaimana skala mesh sesuai dengan pandangan: unit menjadi lebih kecil, dan lebih banyak garis mesh sesuai dengan kawasan Viewport yang sama. Anda boleh menggunakan nilai yang sama dalam pen di bawah untuk melihat bagaimana ia berfungsi:

2.

Satu lagi soalan biasa yang saya lihat ketika menyahpepijat SVG sebaris adalah sama ada atribut

atau width dimasukkan ke dalam tag. Dalam banyak kes, ini bukan masalah besar kecuali SVG terletak di dalam bekas dengan kedudukan mutlak atau bekas fleksibel (kerana Safari menggunakan 0px dan bukannya auto untuk mengira nilai lebar SVG). Dalam kes ini, tidak termasuk lebar atau ketinggian menghalang kita daripada melihat imej penuh, seperti yang kita lihat dengan membuka demo codepen ini dan membandingkannya dalam Chrome, Safari, dan Firefox (mengklik pada imej untuk melihat pandangan yang lebih besar). height

penyelesaian? Tambah lebar atau ketinggian, sama ada sebagai harta perwakilan, harta gaya dalam talian, atau dalam CSS. Elakkan menggunakan ketinggian sahaja, terutamanya jika ditetapkan ke

atau 100%. Penyelesaian lain adalah untuk menetapkan nilai auto dan right. left

anda boleh mencubanya dengan pen berikut dan menggabungkan pilihan yang berbeza.

3.

Ia juga mungkin bahawa kita menggunakan warna ke tag

, sama ada gaya inline atau dari CSS. Ini bagus, tetapi mungkin terdapat nilai warna lain dalam tag atau gaya yang bertentangan dengan warna yang ditetapkan pada

, menyebabkan beberapa kandungan tidak kelihatan. <svg></svg> <svg></svg>

inilah sebabnya saya cenderung untuk mencari sifat fill dan stroke dalam tag SVG dan memadamnya. Video berikut menunjukkan SVG yang saya gaya dengan mengisi merah CSS. Di SVG terdapat beberapa tempat di mana padding diisi secara langsung putih di penanda, yang saya hapuskan untuk menunjukkan bahagian yang hilang.

4

Ini mungkin kelihatan sangat jelas, tetapi anda akan terkejut melihat berapa kerap saya melihatnya berlaku. Katakan kami membuat fail SVG di Illustrator dan bekerja sangat keras untuk menamakan lapisan supaya kami dapat mendapatkan ID sepadan yang bagus ketika mengeksport fail. Katakan kami merancang untuk gaya SVG dalam CSS dengan menyambung ke ID ini.

Ini adalah cara yang baik untuk melakukannya. Walau bagaimanapun, terdapat banyak kali apabila saya melihat fail SVG yang sama dieksport ke lokasi yang sama pada kali kedua dan ID adalah berbeza, biasanya apabila menyalin/menampal vektor secara langsung. Mungkin lapisan baru ditambah, atau salah satu lapisan sedia ada dinamakan semula, atau sesuatu yang lain. Walau apa pun, peraturan CSS tidak lagi sepadan dengan ID dalam tag SVG, menyebabkan SVG menjadi berbeza daripada yang dijangkakan.

Kami mungkin mengalami kesukaran mencari ID ini dalam fail SVG yang besar. Ini adalah masa yang baik untuk membuka DevTools, periksa bahagian graf yang tidak berfungsi, dan lihat jika ID tersebut masih sepadan.

Jadi saya akan mengatakan ia bernilai membuka fail SVG eksport dalam editor kod dan membandingkannya dengan fail asal sebelum bertukar kandungan. Aplikasi seperti Illustrator, Figma, dan lakaran pintar, tetapi itu tidak bermakna kita tidak bertanggungjawab untuk mengkaji semula mereka.

5.

Jika SVG secara tidak sengaja dipotong dan pemeriksaan Viewbox dengan betul, saya biasanya melihat sifat

atau

dalam CSS yang boleh mengganggu imej. Ia menggoda untuk melihat penanda sebaris, tetapi lebih baik untuk mengingati bahawa gaya SVG mungkin berlaku di tempat lain. clip-path mask CSS menanam dan menutupi membolehkan kita untuk "menyembunyikan" bahagian imej atau elemen. Dalam SVG,

adalah operasi vektor yang menanam bahagian imej tanpa hasil pertengahan.

Label adalah operasi piksel yang membolehkan ketelusan, kesan lut dan tepi kabur. <clippath></clippath> <mask></mask> Berikut adalah senarai semak kecil untuk situasi debugging yang melibatkan tanaman dan masking:

• Pastikan laluan kliping (atau topeng) dan angka bertindih antara satu sama lain. Bahagian bertindih adalah bahagian yang dipaparkan.
• Jika anda mempunyai laluan kompleks yang tidak bersilang dengan graf anda, cuba gunakan transformasi sehingga ia sepadan.
• Walaupun <clippath></clippath> atau <mask></mask> tidak diberikan, anda masih boleh menggunakan devtools untuk memeriksa kod dalaman, jadi gunakannya!
Salin tanda dalam
• dan <clippath></clippath> dan tampalnya sebelum menutup tag. Kemudian tambah padding ke bentuk ini dan periksa koordinat dan dimensi SVG. Jika anda masih tidak melihat imej, cuba tambah <mask></mask> ke tag <svg></svg>. overflow="hidden"
cek jika
• atau <clippath></clippath> ID yang unik <mask></mask> digunakan dan sama ada ID yang sama digunakan untuk bentuk atau bentuk kumpulan yang sedang dipotong atau bertopeng. ID yang tidak sesuai boleh merosakkan penampilan. Semak typos dalam tanda antara atau
.
• <clippath></clippath> <mask></mask> , ,
,
• , atau beberapa gaya lain yang digunakan untuk unsur -unsur dalam <clippath></clippath> tidak berguna -satu -satunya bahagian berguna ialah geometri kawasan pengisian unsur -unsur ini. Itulah sebabnya jika anda menggunakan fill ia akan berkelakuan seperti stroke, dan jika anda menggunakan opacity anda tidak akan melihat apa -apa kesan tanaman. <polyline></polyline> <polygon></polygon> <line></line> Jika anda tidak melihat imej selepas memohon , pastikan kandungan topeng tidak sepenuhnya hitam. Kecerahan elemen topeng menentukan kelegapan angka akhir. Anda akan dapat melihat melalui bahagian yang lebih cerah, sementara bahagian -bahagian yang lebih gelap menyembunyikan kandungan imej.
• <mask></mask> Anda boleh berlatih menggunakan topeng dan elemen tanaman dalam pen ini.

6

Adakah anda tahu bahawa SVG adalah bahasa markup berasaskan XML? Ya, itu! Ruang nama SVG ditetapkan pada harta

:

Terdapat banyak perkara yang perlu diketahui mengenai ruang nama dalam XML, dan terdapat pengenalan yang baik untuk permulaan pada MDN. Ia boleh dikatakan bahawa ruang nama menyediakan penyemak imbas dengan konteks yang memberitahu ia akan ditandakan dengan SVG khusus. Idea ini ialah apabila terdapat pelbagai jenis XML dalam fail yang sama (seperti SVG dan XHTML), ruang nama membantu mencegah konflik. Ini adalah masalah yang kurang biasa dalam penyemak imbas moden, tetapi dapat membantu menjelaskan isu -isu rendering SVG yang ketat untuk pelayar atau pelayar yang lebih tua seperti Gecko ketika menentukan jenis dokumen dan ruang nama. xmlns

Spesifikasi SVG 2 tidak memerlukan ruang nama apabila menggunakan sintaks HTML. Tetapi jika menyokong penyemak imbas warisan adalah keutamaan, itu penting -dan, menambah ia tidak menyebabkan sebarang kerosakan. Dengan cara ini, apabila menentukan atribut

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

unsur, tidak akan ada konflik dalam kes -kes yang jarang berlaku.

<svg height="700" viewbox="0 0 700 700" width="700"></svg>

sama benar apabila menggunakan SVG sebaris dalam CSS (contohnya, menetapkannya sebagai imej latar belakang). Dalam contoh berikut, selepas pengesahan yang berjaya, ikon tanda semak muncul dalam kotak input. Penampilan CSS adalah seperti berikut:

<svg viewbox="0 0 700 700"></svg>

Apabila kita memadam ruang nama di dalam SVG di harta latar belakang, imej itu hilang:

Satu lagi awalan ruang nama biasa ialah xlink:href. Kami sering menggunakannya apabila merujuk bahagian lain SVG, seperti corak, penapis, animasi, atau kecerunan. Adalah disyorkan untuk mula menggantikannya dengan href, kerana yang lain telah ditamatkan sejak SVG 2, tetapi mungkin mempunyai masalah keserasian dengan pelayar yang lebih tua. Dalam kes ini, kita boleh menggunakan kedua -duanya. Ingat, jika anda masih menggunakan xlink:href, sertakan ruang nama xmlns:xlink="http://www.w3.org/1999/xlink".

Meningkatkan kemahiran SVG anda!

Jika anda mendapati diri anda menyelesaikan masalah SVG dalam talian yang salah, saya harap petua ini dapat membantu anda menjimatkan banyak masa. Ini hanya perkara yang saya cari. Mungkin anda mempunyai bendera merah yang berbeza untuk memberi perhatian kepada - jika ya, beritahu saya dalam komen!

yang paling penting, adalah berbaloi untuk mempunyai pemahaman asas tentang pelbagai cara untuk menggunakan SVG. Cabaran codepen sering termasuk SVG dan memberikan amalan yang baik. Berikut adalah lebih banyak sumber untuk meningkatkan tahap anda:

• Menggunakan SVG, CSS3 dan HTML5 (Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey)-Saya fikir ia adalah SVG Bible.
• Lea Verou mempunyai pengetahuan SVG yang luas dan telah memberikan kuliah mengenai topik ini berkali -kali (seperti video ini dari Frontend United 2019).
• animasi svg (Sarah Drasner)
• SVG Essentials (Amelia Bellamy-Royds, J. David Eisenberg)
• praktikal svg (Chris Coyier)

saya cadangkan memberi perhatian kepada beberapa orang yang sangat baik yang berkaitan dengan SVG:

• Sara Soueidan
• Carl Schoof
Cassie Evans
kepala val
Ana Tudor

Atas ialah kandungan terperinci 6 SVG biasa gagal (dan bagaimana untuk memperbaikinya). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!