如何建立 SVG 投影陰影？

投影陰影透過賦予 SVG 3D 效果或立體感，提升了外觀，SVG 投影陰影可以使用 SVG 濾鏡以及盒陰影或濾鏡屬性來建立。

  • SVG 濾鏡：提供對陰影屬性的細粒度控制。
  • CSS 盒陰影或濾鏡：使用更簡單的語法應用陰影。

建立 SVG 投影陰影的方法

在 SVG 中使用 <filter> 元素

這是一種功能強大的方法，允許對陰影效果進行詳細控制，包括模糊、偏移和顏色調整，SVG 濾鏡定義應用於元素的圖形效果，而 <feDropShadow> 濾鏡原語簡化了投影陰影的建立。

示例程式碼

<!DOCTYPE html>
<html>

<head>
    <title>Title of the document</title>
</head>

<body>
    <svg width="200" height="200"
         xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="dropShadow" x="0" y="0" 
                    width="200%" height="200%">
                <feDropShadow dx="5" dy="5" stdDeviation="4" 
                              flood-color="black" flood-opacity="0.5" />
            </filter>
        </defs>
        <circle cx="50" cy="50" r="40" fill="green" 
                filter="url(#dropShadow)" />
    </svg>
</body>

</html>

輸出

SVG Drop Shadow

使用 CSS 濾鏡

可以將 CSS 濾鏡：投影陰影；應用於 SVG 元素，濾鏡：投影陰影 CSS 屬性比使用 SVG 濾鏡簡單，並可透過 CSS 樣式表或樣式屬性直接應用。

示例程式碼

<!DOCTYPE html>
<html>

<head>
    <title>Title of the document</title>
</head>

<body>
    <svg width="200" height="200" 
         xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" fill="green" 
                style="filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.5));" />
    </svg>
</body>

</html>

輸出

SVG Drop Shadow

更新於：2024-11-22

3 瀏覽

啟動你的 職業

完成課程後即可獲得認證

開始使用
廣告