CSS3 は SVG 要素にドロップ シャドウを適用できますか?

CSS3 SVG ドロップ シャドウ

CSS3 を使用して SVG にドロップ シャドウを適用することは可能ですか?

はい、CSS フィルター プロパティを使用します。 Webkit ブラウザ、Firefox 34 などの最新のブラウザでサポートされています。 Edge.

構文

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

例

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

これは SVG 要素でも使用できます:

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

レガシー ブラウザ用のポリフィル

Firefox などのブラウザの場合 < 34、IE6 では、次のポリフィルを使用できます:

// 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
  });
};

以上がCSS3 は SVG 要素にドロップ シャドウを適用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。