如何使用 CSS 新增陰影到 SVG？

是否可以使用 CSS 將投影應用於 SVG

CSS 可用於對網頁上的元素應用各種效果，包括投影。但是，SVG 元素不直接支援 box-shadow 屬性。

要為 SVG 實現投影效果，可以使用 CSS 濾鏡屬性。現代瀏覽器支援此屬性，包括 webkit 瀏覽器、Firefox 34 和 Edge。還有一個 Polyfill 可以為 34 以下的 Firefox 版本和 IE6 提供支援。

以下是如何使用篩選器屬性為 SVG 新增陰影：

.shadow {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
  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>

這將建立一個帶有陰影的矩形。您可以透過修改 drop-shadow 函數中的值來調整陰影的位置、模糊和顏色。

以上是如何使用 CSS 新增陰影到 SVG？的詳細內容。更多資訊請關注PHP中文網其他相關文章！