Bolehkah CSS3 Menggunakan Drop Shadows pada Elemen SVG?

Css3 SVG Drop Shadow

Adakah mungkin untuk menggunakan drop shadow pada SVG menggunakan CSS3?

Ya, menggunakan sifat penapis CSS, iaitu disokong oleh penyemak imbas moden seperti pelayar webkit, Firefox 34 dan Edge.

Sintaks

filter: drop-shadow(horizontal-offset vertical-offset blur-radius color);

Contoh

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

Anda juga boleh menggunakan ini dalam elemen SVG:

<svg>
  <rect class="shadow" x="10" y="10" width="200" height="100" fill="#bada55" />
</svg>

Polyfill untuk Penyemak Imbas Warisan

Untuk penyemak imbas seperti Firefox < 34, IE6 , anda boleh menggunakan polyfill ini:

// Usage:
// $(element).cssShadow({horizontal-offset, vertical-offset, blur-radius, color});

$.fn.cssShadow = function(options) {
  // CSS syntax to include the units of the values
  var css = "-webkit-filter: drop-shadow("
    + options.horizontalOffset + "px "
    + options.verticalOffset + "px "
    + options.blurRadius + "px "
    + options.color
    + ");";

  // Applying the css
  return this.css({
    'filter': css,
    '-webkit-filter': css
  });
};

Atas ialah kandungan terperinci Bolehkah CSS3 Menggunakan Drop Shadows pada Elemen SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!