diff options
Diffstat (limited to 'files/zh-cn/web/svg/element/fediffuselighting')
-rw-r--r-- | files/zh-cn/web/svg/element/fediffuselighting/index.html | 128 |
1 files changed, 128 insertions, 0 deletions
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 +--- +<div>{{SVGRef}}</div> + +<p>滤镜光照一个图像,使用alpha通道作为隆起映射。结果图像,是一个RGBA不透明图像,取决于光的颜色、光的位置以及输入隆起映射的表面几何形状。</p> + +<p>滤镜制造的光映射可以与一个纹理图像组合,使用{{SVGElement("feComposite")}}滤镜的多重<code>arithmetic操作。在应用纹理图案之前合加多个光映射可以模拟多重光源。</code></p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<p>以下示例演示了一个圆上的<code>feDiffuseLighting</code>元素的效果,演示了每种可用的光源,光的方向来自左上角。</p> + +<pre class="brush: html"><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></pre> + +<p>预计的呈现:</p> + +<p><img alt="Expected rendering for the example" src="/files/4447/feDiffuseLighting.png" style="height: 120px; width: 430px;"></p> + +<p>实时呈现:</p> + +<p>{{EmbedLiveSample("Example",470,170)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="全局属性">全局属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li> + <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="专有属性">专有属性</h3> + +<ul> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("surfaceScale") }}</li> + <li>{{ SVGAttr("diffuseConstant") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEDiffuseLightingElement" title="en/DOM/SVGFEDiffuseLightingElement">SVGFEDiffuseLightingElement</a></code>接口。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("feBlend") }}</li> + <li>{{ SVGElement("feColorMatrix") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feComposite") }}</li> + <li>{{ SVGElement("feConvolveMatrix") }}</li> + <li>{{ SVGElement("feDisplacementMap") }}</li> + <li>{{ SVGElement("feDistantLight") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("fePointLight") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feSpotLight") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG教程:滤镜效果</a></li> +</ul> |