SVG(可縮放向量圖形)中的陰影效果可以為影像或圖形添加深度和維度。在 SVG 中應用陰影效果的方法有很多種。以下是一些常用的技術:

  1. 使用<filter>元素的投影:您可以使用<filter>元素和feDropShadow濾鏡基元來建立投影效果。這是一個例子:

    XML
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="drop-shadow" x="0" y="0" width="150%" height="150%"> <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <rect width="100" height="100" fill="#3498db" filter="url(#drop-shadow)" /> </svg>

    在此範例中,使用了rect元素並套用了投影濾鏡。您可以調整dxdystdDeviation等參數來控制陰影的外觀。

  2. 文字陰影:將陰影應用於文字元素非常簡單。您可以直接在 SVG 檔案中使用text-shadow CSS 屬性。這是一個例子:

    XML
    <svg width="200" height="50" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="40" font-family="Arial" font-size="20" fill="#3498db" style="text-shadow: 2px 2px 5px rgba(0,0,0,0.5);"> Hello SVG </text> </svg>

    text-shadow屬性採用水平和垂直偏移、模糊半徑和陰影顏色的值。

  3. 使用附加形狀自訂陰影:您可以使用主元素後面的附加形狀建立自訂陰影。例如,建立主要形狀的副本,稍微偏移它,並用代表陰影的顏色填滿它。

    XML
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100" fill="#3498db" /> <rect x="12" y="12" width="100" height="100" fill="rgba(0,0,0,0.5)" /> </svg>

    在此範例中,第二個rect用作第一個的簡單陰影。

請隨意嘗試這些技術並調整參數以在 SVG 圖形中實現所需的陰影效果。