SVG 光照效果 – SVG 滤镜 – C# 代码

SVG 灯光效果 – SVG Lighting Effects

Aspose.SVG for .NET 允许您创建各种灯光效果，以增强图形和插图的视觉吸引力。光照效果可以为平面图像添加深度、真实感和光照感。光照效果是使用一组滤镜在 SVG 中创建的。考虑其中的一些：<feSpecularLighting>和<fePointLight>。您可以组合多个滤镜，创建和控制照明效果的细节。

在本文中，您将学习如何编写 SVG 代码来创建 SVG 光照效果，并考虑使用 Aspose.Svg.Filters 命名空间将光照效果应用于 SVG 元素或位图的详细 C# 示例。

点光源 – SVG 代码

<fePointLight> 过滤器定义设置点光效果的光源。它可以作为子项在<feDiffuseLighting>或<feSpecularLighting>原语中使用。特定属性“x、y”和“z”表示点光源的位置。 <feSpecularLighting> 滤镜使用其 Alpha 通道作为凹凸贴图照亮图像。考虑一个光效的 SVG 示例：

 1<svg xmlns="http://www.w3.org/2000/svg">
 2	<rect x="40" y="40" width="150" height="150" fill="Teal" filter="url(#light)"/>
 3	<defs>
 4		<filter id="light">
 5			<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/>
 6			<feSpecularLighting in="blur" result="light" specularExponent="30" lighting-color="#ddd">
 7				<fePointLight x="70" y="70" z="150"/>
 8			</feSpecularLighting>
 9			<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
10		</filter>
11	</defs>
12</svg>

<feGaussianBlur> 接受输入 SourceAlpha，它是源图像的 Alpha 通道。结果存储在名为blur的临时缓冲区中。
照明是通过<feSpecularLighting>和<fePointLighting>滤镜基元完成的。 <feSpecularLighting>使用缓冲区blur作为表面高程模型，并从<fePointLighting>过滤器中设置的点源生成照明效果。结果存储在缓冲区 light中。
<feComposite> 过滤器采用两个输入 in ="SourceGraphic" 和 in2 ="light" 并使用算术组合运算将它们组合起来。每个结果像素的算术运算符的输出计算如下： k1·in1·in2 + k2·in1 + k3·in2 + k4

在此示例中，应用了四个 SVG 滤镜来创建灯光效果(图 b)：

如果我们删除“光”滤镜代码中的高斯模糊滤镜(图 b)，我们会得到以下“平坦光”滤镜，它会产生更平坦的光(图 c)：

1<filter id="flat-light">
2    <feSpecularLighting  result="light" specularExponent="30" lighting-color="#ddd">
3        <fePointLight x="70" y="70" z="150"/>
4    </feSpecularLighting>
5    <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
6</filter>

文本“已将光照效果应用于矩形：a – 原始图像，b – 应用了“光”滤镜的图像，c – 应用了“平面光”滤镜的图像。”

SVG 光源 – C# 代码

以下 C# 代码片段展示了如何创建与上述 SVG 代码相同的 SVG 光照效果(“光”滤镜)。让我们逐步考虑 C# 代码：

创建 SVGDocument 类的实例。
SVGDocument 类的 RootElement 属性指向文档的根 <svg>元素。
创建一个 <defs> 元素并将其添加到 <svg> 元素：
- 使用 CreateElementNS(namespaceURI, QualifiedName) 方法创建 SVGDefsElement 类的实例。
- 使用 AppendChild() 方法将 <defs> 元素添加到 <svg> 元素。
创建一个<filter>元素，设置一个id属性，并将<filter>添加到<defs>元素：
- 使用 CreateElementNS() 方法创建 SVGFilterElement 类的实例。
- 为<filter>元素设置“filterElement.Id”。使用 SVGElement 类的 Id 属性。
- 使用 AppendChild() 方法将 <filter> 添加到 <defs> 元素。
创建一个 <feGaussianBlur>元素并设置 in、result和stdDeviation属性。然后将其添加到<filter>元素中。
- 使用 CreateElementNS() 方法创建 SVGFEGaussianBlurElement 类的实例。
- 调用 SetAttribute(name, value) 方法设置 in1 和 result 属性。
- 使用 SVGFEGaussianBlurElement 类的 StdDeviationX 和 StdDeviationY 属性来设置 setDerivation 属性。
- 使用 AppendChild() 方法将 <feGaussianBlur> 添加到 <filter> 元素。
以相同的方式创建<feSpecularLighting>、<fePointLight>和<feComposite>元素。指定它们所需的属性，并将这些元素按正确的顺序添加到过滤器中。
创建一个带有属性的 <rect> 元素并将其添加到 <svg> 元素中：
- 您可以使用 CreateElementNS() 方法创建 SVGRectElement 类的实例。
- 设置指定其位置、大小和填充的属性。使用引用filterElement中id属性的 URL 名称的filter属性允许将 SVG 光照效果应用于矩形。
- 要将 rectElement 添加到 svgElement，可以使用 AppendChild() 方法。
调用 Save()方法将生成的SVG图像保存到路径指定的本地文件中。

 1using Aspose.Svg;
 2using System.IO;
 3using Aspose.Svg.Filters;
 4...
 5    // Set SVG Namespace Url
 6    string SvgNamespace = "http://www.w3.org/2000/svg";
 7
 8    using (var document = new SVGDocument())
 9    {
10        var svgElement = document.RootElement;
11
12        // Create a <defs> element and add to the svgElement
13        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
14        svgElement.AppendChild(defsElement);
15
16        // Creating a <filter> element and add to the defsElement
17        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
18        filterElement.Id = "light";
19        defsElement.AppendChild(filterElement);
20
21        // Create a <feGaussianBlur> element and add to the filterElement
22        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
23        feGaussianBlurElement.StdDeviationX.BaseVal = 5;
24        feGaussianBlurElement.StdDeviationY.BaseVal = 5;
25        feGaussianBlurElement.SetAttribute("in1", "SourceAlpha");
26        feGaussianBlurElement.SetAttribute("result", "blur");
27        filterElement.AppendChild(feGaussianBlurElement);
28
29        // Create a feSpecularLighting filter primitive and add it to the filterElement
30        var feSpecularLightingElement = (SVGFESpecularLightingElement)document.CreateElementNS(SvgNamespace, "feSpecularLighting");
31        feSpecularLightingElement.In1.BaseVal = "blur";
32        feSpecularLightingElement.SetAttribute("result", "light");
33        feSpecularLightingElement.SetAttribute("specularExponent", "30");
34        feSpecularLightingElement.SetAttribute("lighting-color", "#ddd");
35        filterElement.AppendChild(feSpecularLightingElement);
36
37        // Create a fePointLight filter primitive and add it to the <feSpecularLighting> element
38        var fePointLightElement = (SVGFEPointLightElement)document.CreateElementNS(SvgNamespace, "fePointLight");
39        fePointLightElement.SetAttribute("x", "70");
40        fePointLightElement.SetAttribute("y", "70");
41        fePointLightElement.SetAttribute("z", "150");
42        feSpecularLightingElement.AppendChild(fePointLightElement);
43
44        // Create a feComposite filter primitive and add it to the filterElement
45        var feCompositeElement = (SVGFECompositeElement)document.CreateElementNS(SvgNamespace, "feComposite");
46        feCompositeElement.In1.BaseVal = "SourceGraphic";
47        feCompositeElement.In2.BaseVal = "light";
48        feCompositeElement.SetAttribute("operator", "arithmetic");
49        feCompositeElement.SetAttribute("k1", "0");
50        feCompositeElement.SetAttribute("k2", "1");
51        feCompositeElement.SetAttribute("k3", "1");
52        feCompositeElement.SetAttribute("k4", "0");
53        filterElement.AppendChild(feCompositeElement);
54
55        // Create a <rect> element and set the "fill" and "filter" attributes
56        var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
57        rectElement.X.BaseVal.Value = 40;
58        rectElement.Y.BaseVal.Value = 40;
59        rectElement.Width.BaseVal.Value = 150;
60        rectElement.Height.BaseVal.Value = 150;
61        rectElement.SetAttribute("fill", "Teal");
62        rectElement.SetAttribute("filter", "url(#light)");
63        svgElement.InsertBefore(rectElement, svgElement.FirstChild);
64
65        // Save the document
66        document.Save(Path.Combine(OutputDir, "lighting-effect.svg"));
67    }

生成的图像 lighting-effect.svg 看起来与上面的图 b 完全相同。

也可以看看

您可以从 GitHub下载完整的示例和数据文件。
关于从 GitHub 下载并运行示例，您可以在 如何运行示例 部分找到。
有关滤镜基元的更多信息，请参阅 W3C Filter Effects Module 页面和 SVG 滤镜和渐变 文章。

投影效果彩色滤光片