SVG 下陰影 2
SVG <feOffset>
濾鏡 <feOffset> 也用於建立下陰影效果。思路是獲取一個 SVG 圖形，並在 xy 平面上稍微移動它。
<feOffset> 和 <feBlend>
第一個示例移動一個矩形（使用 <feOffset>），然後將原始影像與偏移後的影像混合（使用 <feBlend>）。
這是 SVG 程式碼
示例
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" width="120" height="120">
<feOffset in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
自己動手試一試 »
程式碼解釋
- 元素
<filter>的id屬性定義了濾鏡的唯一名稱。 - 偏移效果由
<feOffset>元素定義。 in="SourceGraphic"定義了效果是為整個元素建立的。dx屬性表示沿 x 軸的偏移。dy屬性表示沿 y 軸的偏移。<feBlend>元素透過特定的混合模式將兩個圖形組合在一起。in2屬性定義了混合操作的第二個影像。- <rect> 元素的
filter屬性將元素指向 "f1" 濾鏡。
使用 <feGaussianBlur> 模糊影像
現在，可以模糊偏移後的影像（使用 <feGaussianBlur>）。
這是 SVG 程式碼
示例
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f2" width="120" height="120">
<feOffset in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg>
自己動手試一試 »
程式碼解釋
<feGaussianBlur>元素的stdDeviation屬性定義了模糊的量。
使陰影變黑
現在，使陰影變黑。
這是 SVG 程式碼
示例
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f3" width="120" height="120">
<feOffset in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg>
自己動手試一試 »
程式碼解釋
- <feOffset> 元素的
in屬性已更改為"SourceAlpha"，它使用 Alpha 通道進行模糊，而不是整個 RGBA 畫素。
將陰影視為顏色矩陣
現在，使用 <feColorMatrix> 元素將陰影視為顏色矩陣。
這是 SVG 程式碼
示例
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f4" width="120" height="120">
<feOffset in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix type="matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg>
自己動手試一試 »
程式碼解釋
<feColorMatrix>元素用於根據變換矩陣更改顏色。<feColorMatrix>元素的type屬性指示矩陣操作的型別。matrix關鍵字表示將定義一個完整的 5x4 矩陣值。<feColorMatrix>元素的value屬性定義了矩陣型別的值。
