Bagaimana untuk Menambah Drop Shadows ke SVGs Menggunakan CSS sahaja?

Cara Mencipta Drop Shadows untuk SVGs Menggunakan CSS3

Adakah ia boleh dilakukan untuk mencipta drop shadow untuk elemen SVG menggunakan CSS3? Sesuatu seperti:

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

Perbincangan tentang mencipta bayang menggunakan kesan penapis telah ditemui. Adakah terdapat contoh yang hanya menggunakan CSS? Di bawah ialah kod berfungsi dengan gaya kursor digunakan dengan sewajarnya tetapi tiada kesan bayang-bayang hadir. Bagaimanakah kesan bayangan boleh dicapai dengan kod minimum?

svg .shadow {
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">  
    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

Penyelesaian

Gunakan atribut 'penapis' CSS.

Serasi dengan penyemak imbas webkit, Firefox 34 , dan Edge.

Polifill tersedia untuk menyokong FF < 34 dan IE6 .

Pelaksanaan:

.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}

Atas ialah kandungan terperinci Bagaimana untuk Menambah Drop Shadows ke SVGs Menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!