From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/svg/element/fedropshadow/index.html | 104 +++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 files/ja/web/svg/element/fedropshadow/index.html (limited to 'files/ja/web/svg/element/fedropshadow') diff --git a/files/ja/web/svg/element/fedropshadow/index.html b/files/ja/web/svg/element/fedropshadow/index.html new file mode 100644 index 0000000000..ddc3927577 --- /dev/null +++ b/files/ja/web/svg/element/fedropshadow/index.html @@ -0,0 +1,104 @@ +--- +title: +slug: Web/SVG/Element/feDropShadow +tags: + - Element + - Filters + - Reference + - SVG +translation_of: Web/SVG/Element/feDropShadow +--- +
{{SVGRef}}
+ +

SVG の <feDropShadow> フィルタープリミティブは、入力画像のドロップシャドウを生成します。これは {{SVGElement('filter')}} 要素の中でのみ使用できます。

+ +

ドロップシャドウの色や不透明度は、 {{SVGAttr('flood-color')}} や {{SVGAttr('flood-opacity')}} の各プレゼンテーション属性を使用することで変更できます。

+ +
+ + +
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="shadow">
+      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
+    </filter>
+    <filter id="shadow2">
+      <feDropShadow dx="0" dy="0" stdDeviation="0.5"
+          flood-color="cyan"/>
+    </filter>
+    <filter id="shadow3">
+      <feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0"
+          flood-color="pink" flood-opacity="0.5"/>
+    </filter>
+  </defs>
+
+  <circle cx="5" cy="50%" r="4"
+      style="fill:pink; filter:url(#shadow);"/>
+
+  <circle cx="15" cy="50%" r="4"
+      style="fill:pink; filter:url(#shadow2);"/>
+
+  <circle cx="25" cy="50%" r="4"
+      style="fill:pink; filter:url(#shadow3);"/>
+</svg>
+ +

{{EmbedLiveSample('Example', 150, '100%')}}

+
+ +

属性

+ +
+
{{SVGAttr("dx")}}
+
この属性は、ドロップシャドウの X 方向のオフセットを定義します。
+ 値の型: <number>; 既定値: 2; Animatable: yes
+
{{SVGAttr("dy")}}
+
この属性は、ドロップシャドウの Y 方向のオフセットを定義します。
+ 値の型: <number>; 既定値: 2; Animatable: yes
+
{{SVGAttr("stdDeviation")}}
+
この属性は、ドロップシャドウのぼかし操作の標準偏差を定義します。
+ 値の型: <number>; 既定値: 2; Animatable: yes
+
+ +

グローバル属性

+ +
+
コア属性
+
特に: {{SVGAttr('id')}}
+
スタイル属性
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
フィルタープリミティブ属性
+
{{SVGAttr('height')}}, {{SVGAttr('in')}}, {{SVGAttr('result')}}, {{SVGAttr('x')}}, {{SVGAttr('y')}}, {{SVGAttr('width')}}
+
プレゼンテーション属性
+
特に: {{SVGAttr('flood-color')}}, {{SVGAttr('flood-opacity')}}
+
+ +

使用上の注意

+ +

{{svginfo}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Filters 1.0", "#feDropShadowElement", "<feDropShadow>")}}{{Spec2("Filters 1.0")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("svg.elements.feDropShadow")}}

-- cgit v1.2.3-54-g00ecf