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 示例：

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

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

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

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

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

SVG 光源 – C# 代码

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

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

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;

// Create an SVG <rect> with specular lighting effect using filters in C#

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <defs> element and add to the svgElement
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "light";
    defsElement.AppendChild(filterElement);

    // Create a <feGaussianBlur> element and add to the filterElement
    SVGFEGaussianBlurElement feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
    feGaussianBlurElement.StdDeviationX.BaseVal = 5;
    feGaussianBlurElement.StdDeviationY.BaseVal = 5;
    feGaussianBlurElement.SetAttribute("in1", "SourceAlpha");
    feGaussianBlurElement.SetAttribute("result", "blur");
    filterElement.AppendChild(feGaussianBlurElement);

    // Create a feSpecularLighting filter primitive and add it to the filterElement
    SVGFESpecularLightingElement feSpecularLightingElement = (SVGFESpecularLightingElement)document.CreateElementNS(SvgNamespace, "feSpecularLighting");
    feSpecularLightingElement.In1.BaseVal = "blur";
    feSpecularLightingElement.SetAttribute("result", "light");
    feSpecularLightingElement.SetAttribute("specularExponent", "30");
    feSpecularLightingElement.SetAttribute("lighting-color", "#ddd");
    filterElement.AppendChild(feSpecularLightingElement);

    // Create a fePointLight filter primitive and add it to the feSpecularLighting element
    SVGFEPointLightElement fePointLightElement = (SVGFEPointLightElement)document.CreateElementNS(SvgNamespace, "fePointLight");
    fePointLightElement.SetAttribute("x", "70");
    fePointLightElement.SetAttribute("y", "70");
    fePointLightElement.SetAttribute("z", "150");
    feSpecularLightingElement.AppendChild(fePointLightElement);

    // Create a feComposite filter primitive and add it to the filterElement
    SVGFECompositeElement feCompositeElement = (SVGFECompositeElement)document.CreateElementNS(SvgNamespace, "feComposite");
    feCompositeElement.In1.BaseVal = "SourceGraphic";
    feCompositeElement.In2.BaseVal = "light";
    feCompositeElement.SetAttribute("operator", "arithmetic");
    feCompositeElement.SetAttribute("k1", "0");
    feCompositeElement.SetAttribute("k2", "1");
    feCompositeElement.SetAttribute("k3", "1");
    feCompositeElement.SetAttribute("k4", "0");
    filterElement.AppendChild(feCompositeElement);

    // Create a <rect> element and set the "fill" and "filter" attributes
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 40;
    rectElement.Y.BaseVal.Value = 40;
    rectElement.Width.BaseVal.Value = 150;
    rectElement.Height.BaseVal.Value = 150;
    rectElement.SetAttribute("fill", "Teal");
    rectElement.SetAttribute("filter", "url(#light)");
    svgElement.InsertBefore(rectElement, svgElement.FirstChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "svg-lighting-effect.svg"));
}

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

也可以看看

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