SVG(可縮放向量圖形)中的陰影效果可以為影像或圖形添加深度和維度。在 SVG 中應用陰影效果的方法有很多種。以下是一些常用的技術:
使用<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
元素並套用了投影濾鏡。您可以調整dx
、 dy
、 stdDeviation
等參數來控制陰影的外觀。
文字陰影:將陰影應用於文字元素非常簡單。您可以直接在 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
屬性採用水平和垂直偏移、模糊半徑和陰影顏色的值。
使用附加形狀自訂陰影:您可以使用主元素後面的附加形狀建立自訂陰影。例如,建立主要形狀的副本,稍微偏移它,並用代表陰影的顏色填滿它。
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 圖形中實現所需的陰影效果。