Membuat kesan kaca yang realistik dengan SVG

Saya jatuh cinta dengan SVG. Pasti, kod itu boleh kelihatan padat dan sukar pada mulanya, tetapi anda akan melihat keindahan dalam hasil apabila anda dapat mengenalinya. Bonus adalah bahawa keputusan tersebut berada dalam kod, jadi ia boleh disambungkan ke CMS. Pereka anda boleh berehat dengan mudah mengetahui bahawa mereka tidak perlu menghasilkan semula kesan untuk setiap artikel atau produk di laman web anda.

Hari ini saya ingin menunjukkan kepada anda bagaimana saya datang dengan kesan teks kaca ini.

Langkah 0: Kesabaran dan Ruang

SVG boleh banyak berlaku, terutamanya apabila anda mula belajar (dan jika anda, buku Chris adalah tempat yang baik untuk bermula). Ia praktikal bahasa baru dan, terutamanya bagi orang yang kekurangan coup reka bentuk, terdapat banyak teknik dan pertimbangan baru untuk mengetahui. Seperti HTML, bagaimanapun, anda akan mendapati terdapat beberapa alat yang dapat kami jangkau untuk membantu menjadikan SVG lebih mudah untuk dipahami., Jadi bersabar dan terus berusaha!

Juga, berikan ruang diri anda. Secara harfiah. Kod SVG adalah padat jadi saya suka menggunakan dua atau tiga baris baru untuk ruang angkasa. Ia menjadikan kod lebih mudah dibaca dan membantu saya melihat bagaimana kepingan yang berbeza dipisahkan dengan gangguan visual yang kurang. Oh, dan gunakan komen untuk menandakan di mana anda berada dalam dokumen juga. Itu boleh membantu mengatur pemikiran anda dan mendokumenkan penemuan anda.

Saya telah membuat demo untuk setiap langkah yang akan kita tutupi dalam proses mempelajari kesan kaca ini sebagai cara untuk membantu menguatkan perkara -perkara yang kita tutupi ketika kita pergi.

Ok, sekarang kita bersedia secara mental, mari kita masuk ke dalam daging itu!

Langkah 1: Dapatkan imej asas di tempatnya

Perkara pertama yang pertama: Kami memerlukan imej sebagai latar belakang untuk kesan kaca kami. Di sini kita mempunyai elemen dalam html. Anda akan melihat dimensi atribut Viewbox dan elemen dalam elemen SVG adalah sama. Ini memastikan bahawa adalah saiz yang sama dengan gambar sebenar yang kami sambungkan.

Itulah perbezaan utama yang perlu diperhatikan: Kami menghubungkan dengan imej. Fail SVG itu sendiri tidak menarik imej raster, tetapi kita boleh merujuk satu dalam kod SVG dan pastikan aset berada di lokasi yang kita tunjuk. Jika anda telah bekerja dengan Adobe InDesign sebelum ini, ia seperti menghubungkan ke aset imej dalam susun atur - imej itu dalam susun atur InDesign, tetapi aset itu sendiri sebenarnya tinggal di tempat lain.

Langkah 2: Putus gambar

Langsung setakat ini, tetapi ini adalah di mana perkara menjadi rumit kerana kita akan menambah penapis ke imej yang hanya kita masukkan. Penapis ini akan memesongkan imej. Jika anda melihat dengan teliti perbezaan antara demo dalam langkah terakhir dan yang dalam langkah ini, anda akan melihat bahawa tepi objek dalam imej adalah sedikit kasar dan bergelombang. Itulah penapis di tempat kerja!

Pertama, kami membuat satu lagi

Penapis pertama kami (#displacement) akan memesongkan imej kami. Kami akan menggunakan feturbulence dan fedisplacementmap, masing -masing dijelaskan oleh Sara Soueidan jauh lebih baik daripada yang saya dapat dalam jawatan ini. Beau Jackson juga menulis sekeping bagus yang menunjukkan bagaimana mereka boleh digunakan untuk membuat kesan awan. Cukuplah untuk mengatakan, kedua -dua penapis ini cenderung untuk bersama -sama dan saya suka memikirkannya seperti ketika sesuatu perlu muncul "goyah."

Dengan bekas penapis kami, kami hanya perlu memohon penapis itu ke imej kami dengan atribut penapis pada , sihir!

 <svg>

  
  
  
  <image xlink: href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/kyoto.jpg" width="1890" x="0" height="1260" y="0" clip-path="url)" kesan goyah->
  <filter>
    <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"></feturbulence>
    <fedisplacementmap in2="turbulence" in="sourcepraphic" scale="20" xchannelselector="r" ychannelselector="g"></fedisplacementmap>
  

  

</filter></image></svg> 

Langkah 3: Klip teks

Kami tidak mahu keseluruhan imej diputarbelitkan. Kami akan klip bentuk kami yang terdistorsi kepada bentuk beberapa teks. Ini pada dasarnya akan menjadi bahagian gambar yang dilihat "melalui" kaca.

Untuk melakukan ini, kita perlu menambah elemen dalam dan memberikan ID. Memanggil ID ini dalam laluan klip kami kini mengehadkan bentuknya kepada kami. Hebat!

Langkah 4: Mendedahkan gambar penuh

OK, jadi Bueno yang kita telah diputarbelitkan dipotong ke , tetapi sekarang selebihnya imej hilang. Tiada Bueno.

Kami boleh mengatasi ini dengan menambahkan salinan yang sama tetapi tanpa atribut klip atau penapis sebelum sedia ada kami. Di sinilah saya ingin menambah beberapa komen yang bagus untuk menyimpan perkara yang kemas. Idea ini seperti meletakkan lapisan telus ke atas apa yang kita ada setakat ini.

Saya tahu, saya tahu, ini tidak begitu kemas, dan kita mengulangi diri kita sendiri. Sebaik -baiknya, kami akan menetapkan penapis kami lurus pada elemen dan menggunakan harta tanah dalam = "untuk fedisplacementmap untuk meledingkan apa yang ada di belakang teks itu, tanpa memerlukan unsur -unsur tambahan. Malangnya, ini mempunyai sokongan pelayar yang lemah, jadi kami akan pergi dengan pelbagai imej.

 <svg>

  

  
  <image xlink: href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/kyoto.jpg" width="1890" x="0" height="1260" y="0"> </image>
          
  
  <image xlink: href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/kyoto.jpg" width="1890" x="0" height="1260" y="0" clip-path="url)" banyak barangan->

</image></svg> 

Langkah 5: Letakkan teks ... lagi

Seterusnya, kami akan menduplikasi teks kami seperti yang kami lakukan untuk imej dalam langkah terakhir. Malangnya, kerana teks itu berada dalam laluan klip, kini tidak tersedia untuk rendering. Ini adalah kali terakhir kita akan menduplikasi kandungan seperti ini, saya berjanji!

Sekarang kita harus mempunyai sesuatu yang kelihatan seperti imej biasa dengan teks hitam di atasnya. Jika penapis distorsi pada kami telah dibuat adalah apa yang dapat kita lihat "melalui" kaca, maka baru kami akan menjadi kaca itu sendiri.

 <svg>

  

  
  <lippath>
    <text x="50%" y="50%" dominan-baseline="Middle" text-anchor="Middle"> Kyoto </text>
  
        
  
  <text x="50%" y="50%" dominan-baseline="Middle" text-anchor="Middle"> Kyoto </text>



</lippath></svg> 

Langkah 6: Membuat kelebihan gelap teks

Di sinilah perkara mula menarik, sekurang -kurangnya untuk saya! ?

Kami mahu mencipta kelebihan gelap di sepanjang elemen teks yang, apabila dipasangkan dengan kelebihan cahaya (kita akan melihat yang seterusnya), akan menambah kedalaman ke penampilan teks terhadap imej.

Kami mahu penapis baru untuk kami, jadi mari buat satu dalam elemen SVG penapis kami dan berikannya 4 "untuk mencapai kesan kaca, tetapi lihat apa yang berlaku jika anda menetapkannya kepada 1 ... atau 100!

FeOffset digunakan untuk memindahkan semua "piksel" dalam primitif sebelumnya (femorfologi) di seluruh paksi X atau Y. Nilai dx = "5" dan dy = "5" gerakkan "piksel" tepat pada paksi-x dan paksi-y, masing-masing. Semakin tinggi jumlahnya, semakin jauh mereka bergerak. Masukkan nombor negatif untuk dx dan "piksel" akan bergerak ke kiri. Dy negatif dan mereka akan bergerak! Sekali lagi, adalah jenis perkara yang anda mula belajar semasa anda bermain -main dengan mereka.

Sebab saya mempunyai petikan di sekitar "piksel" adalah kerana mereka bukan piksel skrin seperti yang anda harapkan di CSS. Sebaliknya, mereka merujuk kepada dimensi yang kami tetapkan pada ibu bapa

FEFLOOD hebat. Jika anda ingin mengisi skrin dengan warna, ini adalah primitif yang anda perlukan! Anda mungkin tertanya -tanya mengapa kami tidak dapat membaca teks kami sekarang apabila kami menggunakannya. Itu kerana anda hanya dapat melihat hasil primitif penapis terakhir yang dibuat. Hasil dari setiap primitif terdahulu berkaitan dengan elemen kami. Hasil dari Feflood adalah seperti namanya: Banjir warna. Ia tidak tahu apa yang anda lakukan sebelum ini dan ia tidak peduli - ia hanya akan mengisi kawasan dengan warna.

Di sinilah sesetengah orang mula kecewa dengan SVG. Sukar untuk mengusahakan sesuatu apabila anda tidak dapat melihatnya ! Percayalah, semasa anda bekerja dengan SVG lebih banyak anda akan terbiasa dengan ini. Malah, beberapa langkah seterusnya akan memerlukan kita bergantung kepada ini dan mempercayai bahawa segala -galanya masih ada.

Fecomposite akan menyelesaikan masalah ini untuk kami. Apa yang dilakukannya? MDN menerangkannya sebagai:

The Penapis SVG Primitif melakukan gabungan dua imej input pixel-bijak dalam ruang imej menggunakan salah satu operasi komposit porter-duff: lebih, di, di atas, keluar, xor, dan lebih ringan.

Itu kepada saya ialah Jibba-Jabba. Saya fikir ia menjejaskan lapisan alpha dengan warna/alpha in2.

Dengan ini, kita dapat sekali lagi melihat teks kita yang dinyatakan dan, kerana warna yang kita gunakan sedikit telus, kita juga dapat melihat kesan "kaca" yang terdistorsi. Hebat!

 <svg>

  
    
  
  <femorphology operator="dilate" radius="4" in="sourcealpha" result="dark_edge_01"></femorphology>
    <feconvolvematrix order="3,3" kernelmatrix="1 0 0 
      0 1 0
      0 0 1 " in=" dark_edge_01 " result=" dark_edge_02 "></feconvolvematrix>
    <feoffset dx="5" dy="5" in="dark_edge_02" result="dark_edge_03"></feoffset>
    <feflood banjir-color="rgba (0,0,0, .5)" result="dark_edge_04"></feflood>
    <fecomposite in="dark_edge_04" in2="dark_edge_03" operator="in" result="dark_edge"></fecomposite>
    
  

  

</svg> 

Langkah 7: Mari buat kelebihan cahaya

Ini pada dasarnya sama seperti apa yang kita lakukan secara literal, tetapi kita akan mengalihkan bentuk dan ke kiri menggunakan nilai dx/dy negatif. Kami juga menetapkan warna sedikit putih kali ini. Kami mensasarkan kesan kedalaman yang baik.

Kami sekali lagi berada dalam kedudukan di mana apa yang dapat kita lihat adalah hasil yang paling terkini dari penapis primitif, tetapi kita tidak dapat melihat kelebihan gelap kita! Fecomposite bukanlah apa yang kita mahu gunakan untuk membawa mereka bersama kerana kita tidak mahu alpha kelebihan gelap berwarna oleh tepi cahaya ... kita mahu melihat kedua -duanya! Yang membawa kita ke ...

 <svg>
  <filter>

    

      <femorphology operator="dilate" radius="4" in="sourcealpha" result="light_edge_01"></femorphology>
      <feconvolvematrix order="3,3" kernelmatrix="1 0 0 
        0 1 0
        0 0 1 " in=" light_edge_01 " result=" light_edge_02 "></feconvolvematrix>
      <feoffset dx="-2" dy="-2" in="light_edge_02" result="light_edge_03"></feoffset>
      <feflood banjir-color="rgba (255,255,255, .5)" result="light_edge_04"></feflood>
      <fecomposite in="light_edge_04" in2="light_edge_03" operator="in" result="light_edge"></fecomposite>

    
  
  
</filter></svg> 

Langkah 8: Gabungkan tepi

Femerge! Ia adalah wira. Ia membolehkan kita mengambil sejumlah hasil primitif dan menggabungkannya, membuat imej baru. Woohoo, kini kita dapat melihat kedua -dua tepi gelap dan cahaya bersama -sama!

Walau bagaimanapun, kami mahu mereka menjadi tepi dan bukannya mengisi keseluruhan teks, jadi kami perlu mengeluarkan ruang yang asal yang asal. Apa yang kita perlukan seterusnya adalah satu lagi fecomposite untuk memotong sumber asal. Kerana kami menggunakan femorfologi untuk menggemukkan surat -surat untuk tepi kami, kini kami dapat memotong bentuk surat asal dari hasil femerge kami.

 <svg>
  <filter>

    

    <femerge result="tepi">
      <femergenode in="dark_edge"></femergenode>
      <femergenode in="light_edge"></femergenode>
    </femerge>
    <fecomposite in="edges" in2="sumber grafik" operator="out" result="edges_complete"></fecomposite>

  
</filter></svg> 

Sekarang kita mula kelihatan seperti kaca, dengan hanya satu bahagian yang hilang.

Langkah 9: Ya, serong

Kami mempunyai kesan kaca 3D yang cukup baik. Walau bagaimanapun, huruf kelihatan rata. Mari kita tambahkan satu lagi kesan dan membuat mereka kelihatan lebih bulat.

Untuk mencapai matlamat ini, kita akan membuat kesan yang teruk.

Mula -mula kita akan menggunakan Fegaussianblur. Ini akan mengaburkan penapis sedia ada kami sedikit. Kami akan menggunakan hasil kabur ini sebagai asas untuk menambah beberapa pencahayaan fespecular. Seperti biasa, jangan ragu untuk bermain dengan nombor di sini dan lihat apa kesan yang boleh anda dapatkan! Yang utama yang mungkin anda mahu ubah ialah atribut warna pencahayaan. Imej yang kami gunakan di sini sedikit gelap, jadi kami menggunakan warna pencahayaan yang terang. Jika imej anda sangat cerah, ini akan membuat huruf sukar dibaca, jadi anda mungkin menggunakan warna pencahayaan yang lebih gelap dalam kes itu.

 <svg>
  <filter>
  
    

    <fegaussianblur stddeviation="5" result="bevel_blur"></fegaussianblur>
    <fespecularlighting result="bevel_lighting" in="bevel_blur" specularconstant="2.4" specularexponent="13" pencahayaan-warna="rgba (60,60,60, .4)">
      <fedistantlight azimuth="25" ketinggian="40"></fedistantlight>
    
    <fecomposite in="bevel_lighting" in2="sumber grafik" operator="dalam" result="bevel_complete"></fecomposite>

  
</fespecularlighting></filter></svg> 

Langkah 10: Semua Bersama Sekarang!

Akhirnya, dengan semua keping siap, kami melakukan satu femerge terakhir untuk mendapatkan segala -galanya untuk kesan selesai!

 <svg>
  <filter>

    

    <femerge result="lengkap">
      <femergenode in="edges_complete"></femergenode>
      <femergenode in="bevel_complete"></femergenode>
    </femerge>
  
</filter></svg>

Inilah semuanya bersama -sama, dengan baik dan mengulas:

 
<svg viewbox="0 0 1890 1260">
        
  
  <image xlink: href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/kyoto.jpg" width="1890" x="0" height="1260" y="0"> </image>
    
  
  <image xlink: href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5946/kyoto.jpg" width="1890" x="0" height="1260" y="0" clip-path="url)">
  <lippath>
    <text x="50%" y="50%" dominan-baseline="Middle" text-anchor="Middle"> Kyoto </text>
  
    
  
  <text x="50%" y="50%" dominan-baseline="tengah" text-anchor="tengah" filter="url (#textfilter)"> kyoto </text>
    
</lippath></image></svg>


<svg>
  <filter>
    <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"></feturbulence>
    <fedisplacementmap in2="turbulence" in="sourcepraphic" scale="20" xchannelselector="r" ychannelselector="g"></fedisplacementmap>
  
    
  <filter>
            
    
    <femorphology operator="dilate" radius="4" in="sourcealpha" result="dark_edge_01"></femorphology>
    <feoffset dx="5" dy="5" in="dark_edge_01" result="dark_edge_03"></feoffset>
    <feflood banjir-color="rgba (0,0,0, .5)" result="dark_edge_04"></feflood>
    <fecomposite in="dark_edge_04" in2="dark_edge_03" operator="in" result="dark_edge"></fecomposite>     
            
    
    <femorphology operator="dilate" radius="4" in="sourcealpha" result="light_edge_01"></femorphology>
    <feoffset dx="-2" dy="-2" in="light_edge_01" result="light_edge_03"></feoffset>
    <feflood banjir-color="rgba (255,255,255, .5)" result="light_edge_04"></feflood>
    <fecomposite in="light_edge_04" in2="light_edge_03" operator="in" result="light_edge"></fecomposite>
          
    
    <femerge result="tepi">
      <femergenode in="dark_edge"></femergenode>
      <femergenode in="light_edge"></femergenode>
    </femerge>
    <fecomposite in="edges" in2="sumber grafik" operator="out" result="edges_complete"></fecomposite>
          
    
    <fegaussianblur stddeviation="5" result="bevel_blur"></fegaussianblur>
    <fespecularlighting result="bevel_lighting" in="bevel_blur" specularconstant="2.4" specularexponent="13" pencahayaan-warna="rgba (60,60,60, .4)">
      <fedistantlight azimuth="25" ketinggian="40"></fedistantlight>
    
    <fecomposite in="bevel_lighting" in2="sumber grafik" operator="dalam" result="bevel_complete"></fecomposite>

    
    <femerge result="lengkap">
              <femergenode in="edges_complete"></femergenode>
              <femergenode in="bevel_complete"></femergenode>
    </femerge>

  
</fespecularlighting></filter></filter></svg> 

Atas ialah kandungan terperinci Membuat kesan kaca yang realistik dengan SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!