可以使用 CSS3 向 SVG 元素添加投影效果。與先前的 box-shadow 或 -webkit-box-shadow 屬性相反，現代方法涉及利用 CSS 過濾器屬性。
受到webkit、Firefox 等流行瀏覽器的支援34 和Edge 一樣，CSS 濾鏡屬性提供了用於投影效果的專用語法：
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
將濾鏡屬性套用到有「.shadow」類別的SVG 元素：
.shadow {
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}陰影效果將應用於任何帶有「.shadow」的 SVG 元素類，包括圖像、形狀和群組。陰影的外觀可以透過調整濾鏡函數中的值來自訂。
雖然過濾器屬性本身提供了出色的支持，但您可能需要針對 FF 等舊版瀏覽器的 Polyfill
以上是如何使用 CSS3 建立 SVG 投影？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
