SVG 教程

SVG要素

SVG シャドウ

SVGでは、影響効果を表示するために、<feOffset>要素を使用します。影響効果を実現するために、SVGグラフィックを取り、xy平面で少し移動させます。Internet ExplorerやSafariはSVGフィルタをサポートしていません！

オンラインサンプル

以下に紫色的背景影響効果を実現します:

示例

<svg　height="250"　width="250">
　　<defs>
　　　　<filter　id="p1"　x="0"　y="0"　width="200%"　height="200%">
　　　　　　<feOffset　result="offOut"　in="SourceGraphic"　dx="20"　dy="20"></feOffset>
　　　　　　<feGaussianBlur　result="blurOut"　in="offOut"　stdDeviation="10></feGaussianBlur>
　　　　　　<feBlend　in="SourceGraphic"　in2="blurOut"　mode="normal"></feBlend>
　　　　</filter>
　　</defs>
　　<rect　width="90"　height="90"　stroke="blue"　stroke-width="3"　fill="purple"　filter="url(#p1)"　/>
　　</svg>

テストして‹/›

注意：Internet Explorer 9および以前のバージョンでは SVG フィルタリングをサポートしていません。

実行後の効果は以下の通りです：

使い方説明

<filter>　のid属性は、パターンのユニークな名前を定義します。
<rect>要素のfilter属性は、要素を「 p1”フィルタ。

制作一个黑色的阴影

示例

<svg　xmlns="http://www.w3.org/2000/svg"　version="1.1">
　　<defs>
　　　　<filter　id="f1"　x="0"　y="0"　width="200%"　height="200%">
　　　　　　<feOffset　result="offOut"　in="SourceAlpha"　dx="20"　dy="20"　/>
　　　　　　<feGaussianBlur　result="blurOut"　in="offOut"　stdDeviation="10"　/>
　　　　　　<feBlend　in="SourceGraphic"　in2="blurOut"　mode="normal"　/>
　　　　</filter>
　　</defs>
　　<rect　width="90"　height="90"　stroke="green"　stroke-width="3"　fill="yellow"　filter="url(#f1)"　/>
</svg>

テストを試してみる ‹/›

実行後の効果は以下の通りです：

注意：Internet Explorer 9および以前のバージョンでは SVG フィルタリングをサポートしていません。

SVG 実例全書 SVG フルーム効果