From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/svg/element/fediffuselighting/index.html | 128 +++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/zh-cn/web/svg/element/fediffuselighting/index.html (limited to 'files/zh-cn/web/svg/element/fediffuselighting/index.html') diff --git a/files/zh-cn/web/svg/element/fediffuselighting/index.html b/files/zh-cn/web/svg/element/fediffuselighting/index.html new file mode 100644 index 0000000000..0165839c35 --- /dev/null +++ b/files/zh-cn/web/svg/element/fediffuselighting/index.html @@ -0,0 +1,128 @@ +--- +title: feDiffuseLighting +slug: Web/SVG/Element/feDiffuseLighting +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 +translation_of: Web/SVG/Element/feDiffuseLighting +--- +
{{SVGRef}}
+ +

滤镜光照一个图像，使用alpha通道作为隆起映射。结果图像，是一个RGBA不透明图像，取决于光的颜色、光的位置以及输入隆起映射的表面几何形状。

+ +

滤镜制造的光映射可以与一个纹理图像组合，使用{{SVGElement("feComposite")}}滤镜的多重arithmetic操作。在应用纹理图案之前合加多个光映射可以模拟多重光源。

+ +

用法

+ +

{{svginfo}}

+ +

示例

+ +

以下示例演示了一个圆上的feDiffuseLighting元素的效果，演示了每种可用的光源，光的方向来自左上角。

+ +
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- No light is applied -->
+  <text text-anchor="middle" x="60" y="22">No Light</text>
+  <circle cx="60" cy="80" r="50" fill="green" />
+
+  <!-- the light source is a fePointLight element -->
+  <text text-anchor="middle" x="170" y="22">fePointLight</text>
+  <filter id="lightMe1">
+    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
+      <fePointLight x="150" y="60" z="20" />
+    </feDiffuseLighting>
+
+    <feComposite in="SourceGraphic" in2="light"
+                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+  </filter>
+
+  <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightMe1)" />
+
+  <!-- the light source is a feDistantLight element -->
+  <text text-anchor="middle" x="280" y="22">feDistantLight</text>
+  <filter id="lightMe2">
+    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
+      <feDistantLight azimuth="240" elevation="20"/>
+    </feDiffuseLighting>
+
+    <feComposite in="SourceGraphic" in2="light"
+                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+  </filter>
+
+  <circle cx="280" cy="80" r="50" fill="green" filter="url(#lightMe2)" />
+
+  <!-- the light source is a feSpotLight source -->
+  <text text-anchor="middle" x="390" y="22">feSpotLight</text>
+  <filter id="lightMe3">
+    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
+      <feSpotLight x="360" y="5" z="30" limitingConeAngle="20"
+                   pointsAtX="390" pointsAtY="80" pointsAtZ="0"/>
+    </feDiffuseLighting>
+
+    <feComposite in="SourceGraphic" in2="light"
+                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+  </filter>
+
+  <circle cx="390" cy="80" r="50" fill="green" filter="url(#lightMe3)" />
+</svg>
+ +

预计的呈现：

+ +

Expected rendering for the example

+ +

实时呈现：

+ +

{{EmbedLiveSample("Example",470,170)}}

+ +

属性

+ +

全局属性

+ + + +

专有属性

+ + + +

DOM 接口

+ +

该元素实现了SVGFEDiffuseLightingElement接口。

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf