Helpful resources ▼
  Download   Pricing   Buy

彩色滤光片 – Color Filters – C# 代码

在本文中，您将了解主要的颜色滤镜 – <feColorMatrix> 和 <feComponentTransfer>。在这里，您将找到展示如何编写 SVG 代码来创建饱和度、hueRotate 和 luminanceToAlpha 效果的示例，以及使用 Aspose.Svg.Filters 命名空间将颜色滤镜应用到 SVG 元素或的详细 C# 示例。位图。

彩色滤光片 – Color Filters

Aspose.SVG for .NET 可让您创建几乎所有现代浏览器都支持的各种 SVG 滤镜效果。当谈到颜色处理时，<feColorMatrix>是最好的选择。它是一种颜色滤镜，使用矩阵影响每个 RGBA 通道的颜色值。 <feComponentTransfer> 是最强大的 SVG 过滤器基元之一。它可以控制图像的各个 RGBA 通道，允许您创建类似 Photoshop 的 SVG 效果；例如，它可用于对图像进行色调分离。

颜色矩阵 – <feColorMatrix> 滤镜基元

<feColorMatrix> 是主要的滤色器之一。该滤波器基元将矩阵变换应用于输入图像中每个像素的 RGBA 通道。结果，生成了一组新的颜色和 alpha 值。在常见情况下，颜色矩阵被编写为<feColorMatrix>元素的type属性的操作。在颜色矩阵的特殊情况下，使用type的辅助操作：saturate、hueRotate、luminanceToAlpha。

饱和效果 – Saturation Effect

饱和度效果是使用颜色矩阵的一种特殊情况。让我们看一下<feColorMatrix>滤镜原语的type属性中使用的 saturate 操作的示例：

1<svg xmlns="http://www.w3.org/2000/svg">
2    <image filter="url(#saturation-effect)" href="http://docs.aspose.com/svg/net/images/api/lighthouse.jpg" x="20" y="20" height="440" width="330" />
3    <defs>
4        <filter id="saturation-effect">
5            <feColorMatrix in="SourceGraphic" type="saturate" values="2"></feColorMatrix>
6        </filter>
7    </defs>
8</svg>

上面的 SVG 代码说明了饱和效果的创建，并提醒您在 SVG 中，过滤器是由设置在 <defs> 元素内的<filter>元素定义的。它永远不会自行渲染，并且在概念上被描述为一个包含其子元素(即过滤器基元)的元素。

以下 C# 代码创建一个 SVG 文件，其中的图像饱和度增加，使颜色显得更加鲜艳。饱和度效果是通过<feColorMatrix>滤镜原语以及代码中指定的值来实现的。

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Filters;
4using Aspose.Svg.DataTypes;
 1// Apply saturation filter to an <image> element in SVG programmatically
 2
 3// Set SVG Namespace Url
 4string SvgNamespace = "http://www.w3.org/2000/svg";
 5
 6// Initialize an SVG document
 7using (SVGDocument document = new SVGDocument())
 8{
 9    SVGSVGElement svgElement = document.RootElement;
10
11    // Create an <image> element and add it to the <svg> element
12    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
13    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/lighthouse.jpg";
14    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
15    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
16    imageElement.Height.BaseVal.Value = 440;
17    imageElement.Width.BaseVal.Value = 330;
18    imageElement.X.BaseVal.Value = 20;
19    imageElement.Y.BaseVal.Value = 20;
20    imageElement.SetAttribute("filter", "url(#saturation)");
21    svgElement.AppendChild(imageElement);
22
23    // Create a <defs> element and add it to the <svg> element
24    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
25    svgElement.AppendChild(defsElement);
26
27    // Create a <filter> element and add it to the <defs> element	
28    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
29    filterElement.Id = "saturation";
30    defsElement.AppendChild(filterElement);
31
32    // Create a <feColorMatrix> element and add it to the <filter> element
33    SVGFEColorMatrixElement feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
34    feColorMatrixElement.In1.BaseVal = "SourceGraphic";
35    feColorMatrixElement.SetAttribute("type", "saturate");
36    feColorMatrixElement.SetAttribute("values", "2");
37    filterElement.AppendChild(feColorMatrixElement);
38
39    // Save the document
40    document.Save(Path.Combine(OutputDir, "saturation-effect.svg"));
41}
Example-ApplySaturationFilterToImage.cs hosted with ❤ by GitHub

让我们逐步考虑一下代码：

  1. 创建 SVGDocument 类的实例。
  2. SVGDocument 类的 RootElement 属性指向文档的根 <svg> 元素。
  3. 创建一个带有属性的 <image> 元素并将其添加到 <svg> 元素：
    • 您可以使用 CreateElementNS(namespaceURI, qualifiedName) 方法创建 SVGImageElement 类的实例。
    • 设置指定其来源、位置和大小的属性。使用 imageElement 的 filter 属性引用 filterElement 中 id 属性的 URL 名称，可以将 SVG 滤镜效果应用于图像。
    • 要将imageElement添加到svgElement，您可以使用 AppendChild()方法。
  4. 创建一个 <defs> 元素并将其添加到 <svg> 元素：
    • 使用 CreateElementNS() 方法创建 SVGDefsElement 类的实例。
    • 使用 AppendChild() 方法将 <defs> 元素添加到 <svg> 元素。
  5. 创建一个<filter>元素，设置一个id属性，并将<filter>添加到<defs>元素：
    • 使用 CreateElementNS() 方法创建 SVGFilterElement 类的实例。
    • 为<filter>元素设置一个 filterElement.Id ，它可以应用于图像。
    • 使用 AppendChild() 方法将 <filter> 添加到 <defs> 元素。
  6. 创建一个 <feColorMatrix> 元素，设置属性，并将其添加到 <filter> 元素：
    • 使用 CreateElementNS() 方法创建 SVGFEColorMatrix 类的实例。
    • 调用 SetAttribute(name, value) 方法设置 type 和 values 属性。
    • 不要忘记设置in1属性。使用 SVGAnimatedLength 类型的属性，可以通过构造 feColorMatrixElement.In1.BaseVal = "SourceGraphic" 来设置或读取其静态数据。
    • 使用 AppendChild() 方法将 <feColorMatrix> 添加到 <filter> 元素。
  7. 调用 Save()方法将带有饱和图像的SVG文档保存到path指定的本地文件中。

HueRotate

颜色矩阵的具体情况是沿着 色轮 的图像旋转。 type="hueRotate" 操作用于更改图像或元素的色调。使用 hueRotate ，您可以创建生动、丰富的色彩效果并自定义网站元素的外观。 hueRotate 采用一个 value – 旋转角度(以度为单位)。该角度表示色轮旋转的角度。该值可以在 0 到 360 之间，其中 0 到 360 表示原始色调，180 表示 180 度旋转(颜色反转)。

以下 SVG 示例说明了在<feColorMatrix>滤镜基元中使用 type="hueRotate" 操作：

1<defs>
2    <filter id="hueRotate">
3        <feColorMatrix in="SourceGraphic" type="hueRotate" values="150"></feColorMatrix>
4    </filter>
5</defs>

下面的 C# 代码创建一个<feColorMatrix>滤镜基元，并将其添加到现有的 SVG<filter>元素，以使用 Aspose.SVG for .NET API 应用hueRotate 效果。色调旋转效果改变输入图形的色调，有效地围绕色轮改变其颜色。

1    // Creating a <feColorMatrix> element and add to the <filter> element
2    var feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
3    feColorMatrixElement.In1.BaseVal = "SourceGraphic";
4    feColorMatrixElement.SetAttribute("type", "hueRotate");
5    feColorMatrixElement.SetAttribute("values", "150");
6    filterElement.AppendChild(feColorMatrixElement);

该图是一系列具有各种type属性值的图像。该图演示了源图像 (a)、应用饱和度效果 (b)、hueRotate (c) 和luminanceToAlpha (d) 之后由 feColorMatrix 滤镜处理的图像。

Text “一系列具有不同颜色矩阵type属性值的图像 – 饱和度、色调旋转和亮度ToAlpha。”

颜色通道 – <feComponentTransfer> 滤镜原语

<feComponentTransfer> 过滤器基元是一个功能强大的 SVG 元素，它允许您对图像通道执行线性、表格、离散操作，并更改每个通道 (RGBA) 的伽玛值。这可以实现各种颜色调整和效果，例如对比度变化、伽马校正、颜色反转、亮度调整等。

通常，子元素<feFuncR>、<feFuncG>、<feFuncB>和<feFuncA>与<feComponentTransfer>一起使用。它们分别定义红色、绿色、蓝色和 alpha 通道的变换函数，并且可以包含定义变换行为的属性，例如type、tableValues、slope、intercept、amplitude、exponent和offset。在type属性中，确定了允许修改该组件的函数的类型。有五种函数类型：identity, table, discrete, linear 和 gamma*。当type="linear"时，slope属性表示线性函数的斜率。如果未指定该属性，则效果就像指定了值 1 一样。让我们看一个 SVG 示例：

 1<svg xmlns="http://www.w3.org/2000/svg">
 2	<image href="http://docs.aspose.com/svg/images/api/seaside.jpg" height="330" width="440" x="10" y="10" filter="url(#rgba)" />
 3    <defs>
 4		<filter id="rgba">
 5			<feComponentTransfer>
 6				<feFuncR type="linear" slope="1.1"/>
 7				<feFuncG type="linear" slope="1.5"/>
 8				<feFuncB type="linear" slope="2.0"/>
 9				<feFuncA type="identity"/>
10			</feComponentTransfer>
11		</filter>
12	</defs>
13</svg>

这里我们将编写 C# 代码来创建与上述 ​​SVG 代码相同的图像通道线性变换效果。

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Filters;
 1// Apply RGBA component transfer filter to an <image> element in SVG programmatically
 2
 3// Set SVG Namespace Url
 4string SvgNamespace = "http://www.w3.org/2000/svg";
 5
 6// Initialize an SVG document
 7using (SVGDocument document = new SVGDocument())
 8{
 9    SVGSVGElement svgElement = document.RootElement;
10
11    // Create an <image> element and add it to the svgElement
12    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
13    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
14    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
15    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
16    imageElement.Height.BaseVal.Value = 640;
17    imageElement.Width.BaseVal.Value = 480;
18    imageElement.X.BaseVal.Value = 20;
19    imageElement.Y.BaseVal.Value = 20;
20    imageElement.SetAttribute("filter", "url(#rgba)");
21    svgElement.AppendChild(imageElement);
22
23    // Create a <defs> element and add it to the <svg> element
24    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
25    svgElement.AppendChild(defsElement);
26
27    // Create a <filter> element and add it to the <defs> element
28    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
29    filterElement.Id = "rgba";
30    defsElement.AppendChild(filterElement);
31
32    // Create a <feComponentTransfer> element and add it to the <filter> element
33    SVGFEComponentTransferElement feComponentTransferElement = (SVGFEComponentTransferElement)document.CreateElementNS(SvgNamespace, "feComponentTransfer");
34    filterElement.AppendChild(feComponentTransferElement);
35
36    // Create a <feFuncR> element and add it to the <feComponentTransfer> element
37    SVGFEFuncRElement feFuncRElement = (SVGFEFuncRElement)document.CreateElementNS(SvgNamespace, "feFuncR");
38    feFuncRElement.SetAttribute("type", "linear");
39    feFuncRElement.SetAttribute("slope", "1.1");
40    feComponentTransferElement.AppendChild(feFuncRElement);
41
42    // Creating a <feFuncG> element and add it to the <feComponentTransfer> element
43    SVGFEFuncGElement feFuncGElement = (SVGFEFuncGElement)document.CreateElementNS(SvgNamespace, "feFuncG");
44    feFuncGElement.SetAttribute("type", "linear");
45    feFuncGElement.SetAttribute("slope", "1.5");
46    feComponentTransferElement.AppendChild(feFuncGElement);
47
48    // Create a <feFuncB> element and add it to the <feComponentTransfer> element
49    SVGFEFuncBElement feFuncBElement = (SVGFEFuncBElement)document.CreateElementNS(SvgNamespace, "feFuncB");
50    feFuncBElement.SetAttribute("type", "linear");
51    feFuncBElement.SetAttribute("slope", "2.0");
52    feComponentTransferElement.AppendChild(feFuncBElement);
53
54   // Create a <feFuncA> element and add it to the <feComponentTransfer> element
55   SVGFEFuncAElement feFuncAElement = (SVGFEFuncAElement)document.CreateElementNS(SvgNamespace, "feFuncA");
56   feFuncAElement.SetAttribute("type", "identity");
57   feComponentTransferElement.AppendChild(feFuncAElement);
58  
59    // Save the document
60    document.Save(Path.Combine(OutputDir, "rgba.svg"));
61}
Example-ApplyRGBAFilterToImage.cs hosted with ❤ by GitHub

该图展示了源图像 (a) 和 feComponentTransfer 过滤器处理的图像 (b, c)。

Text “feComponentTransfer 过滤器应用的结果”

也可以看看

  • 您可以从 GitHub下载完整的示例和数据文件。

  • 关于从 GitHub 下载并运行示例，您可以在 如何运行示例 部分找到。

  • 有关滤镜基元的更多信息，请参阅 W3C Filter Effects Module 页面和 SVG 滤镜和渐变 文章。

  • Aspose.SVG 提供免费的 SVG Web 应用程序，用于转换 SVG 或图像文件、合并 SVG、图像矢量化、SVG 精灵生成、SVG 到 Base64 数据编码等。这些在线应用程序可以在任何带有网络浏览器的操作系统上运行，并且不需要安装额外的软件。这是一种快速、简单的方法，可以高效、有效地解决您的 SVG 相关任务！

SVG 灯光效果 SVG 渐变
Close
Loading

Analyzing your prompt, please hold on...

An error occurred while retrieving the results. Please refresh the page and try again.

Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2026. All Rights Reserved.