Helpful resources ▼
  Download   Pricing   Buy

Цветовые SVG фильтры – код C#

В этой статье вы узнаете об основных цветовых фильтрах – <feColorMatrix> и <feComponentTransfer>. Здесь вы найдете примеры, показывающие, как писать код SVG для создания эффектов насыщенности, hueRotate и luminanceToAlpha, а также подробные примеры C# использования пространства имен Aspose.Svg.Filters для применения цветовых фильтров к элементам SVG или растровые изображения.

Цветные фильтры – Color Filters

Aspose.SVG for .NET позволяет создавать различные эффекты фильтров SVG, используя классы и интерфейсы, относящиеся к пространству имен Aspose.Svg.Filters. Когда дело доходит до обработки цвета, лучшим вариантом является <feColorMatrix>. Это тип цветового фильтра, который использует матрицу для воздействия на значения цвета для каждого канала RGBA. <feComponentTransfer> – один из самых мощных примитивов фильтров SVG. Он дает контроль над отдельными каналами RGBA изображения, позволяя создавать эффекты SVG, подобные Photoshop; например, его можно использовать для постеризации изображений.

Цветовая матрица – примитив фильтра <feColorMatrix>

<feColorMatrix> – один из основных цветовых фильтров. Этот примитив фильтра применяет матричное преобразование к каналам RGBA каждого пикселя входного изображения. В результате создается новый набор значений цвета. В общем случае цветовая матрица записывается как операция атрибута type элемента <feColorMatrix>. В особых случаях цветовых матриц используются вспомогательные операции типа: saturate, hueRotate, luminanceToAlpha.

Эффект насыщенности – Saturation Effect

Эффект насыщенности – это частный случай использования цветовой матрицы. Давайте посмотрим примеры операции saturate, используемой в атрибуте type примитива фильтра <feColorMatrix>:

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 фильтр определяется элементом <filter>, который устанавливается внутри элемента <defs>. Он никогда не отображается сам по себе и концептуально описывается как элемент, включающий в себя дочерние элементы – примитивы фильтра.

Следующий код 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. Свойство RootElement класса SVGDocument указывает на корневой элемент документа <svg>.
  2. Создайте элемент <image> с атрибутами и добавьте его к элементу <svg>:
    • Вы можете использовать метод CreateElementNS(namespaceURI, qualifiedName) для создания экземпляра SVGImageElement класса.
    • Установите атрибуты, определяющие его источник, положение и размер. Использование атрибута filter элемента imageElement, ссылающегося на URL-адрес атрибута id в filterElement, позволяет применить эффект фильтра SVG к изображению.
    • Чтобы добавить imageElement к svgElement, вы можете использовать метод AppendChild().
  3. Создайте элемент <defs> и добавьте его к элементу <svg>:
    • Используйте метод CreateElementNS(), чтобы создать экземпляр класса SVGDefsElement.
    • Используйте метод AppendChild(), чтобы добавить элемент <defs> к элементу <svg>.
  4. Создайте элемент <filter>, установите атрибут id и добавьте <filter> к элементу <defs>:
    • Используйте метод CreateElementNS(), чтобы создать экземпляр класса SVGFilterElement.
    • Установите filterElement.Id для элемента <filter>, его можно применить к изображению.
    • Используйте метод AppendChild(), чтобы добавить <filter> к элементу <defs>.
  5. Создайте элемент <feColorMatrix>, установите атрибуты и добавьте его к элементу <filter>:
    • Используйте метод CreateElementNS(), чтобы создать экземпляр класса SVGFEColorMatrix.
    • Вызовите метод SetAttribute(name, value), чтобы установить атрибуты type и values.
    • Не забудьте установить атрибут in1. Используйте свойство типа SVGAnimatedLength, статические данные для которого можно задать или прочитать через конструкцию feColorMatrixElement.In1.BaseVal = "SourceGraphic".
    • Используйте метод AppendChild(), чтобы добавить <feColorMatrix> к элементу <filter>.
  6. Вызовите метод Save(), чтобы сохранить документ SVG с насыщенным изображением в указанный локальный файл.

HueRotate

Конкретным случаем цветовых матриц является вращение изображения по цветовому кругу. Операция type="hueRotate" используется для изменения цветового тона изображения или элемента. С помощью hueRotate вы можете создавать яркие, насыщенные цветовые эффекты и настраивать внешний вид элементов вашего веб-сайта. HueRotate принимает значение – угол поворота в градусах – это угол поворота цветового круга. Значение может находиться в диапазоне от 0 до 360, где 0 и 360 представляют исходный цветовой тон, а 180 представляет поворот на 180 градусов (цвета инвертируются).

Следующий пример SVG иллюстрирует использование операции type="hueRotate" в примитиве фильтра <feColorMatrix>:

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

Приведенный ниже код C# создает примитив фильтра <feColorMatrix> и добавляет его к существующему SVG-элементу <filter> для применения эффекта hueRotate с использованием Aspose.SVG for .NET API. Эффект вращения оттенка изменяет оттенок входного изображения, эффективно перемещая его цвета по цветовому кругу.

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. На рисунке показано исходное изображение (а), изображения, обработанные фильтром feColorMatrix – после применения эффекта насыщенности (b), hueRotate (c) и luminanceToAlph (d).

Текст «Серия изображений с различными значениями атрибута type цветовой матрицы – saturate, hueRotate и luminanceToAlpha.»

Цветовые каналы – примитив фильтра <feComponentTransfer>

Примитив фильтра <feComponentTransfer> – это мощный элемент SVG, который позволяет выполнять линейные, табличные, дискретные операции с каналами изображения и изменять гамму каждого канала (RGBA). Это позволяет выполнять различные настройки цвета и эффекты, такие как изменение контрастности, гамма-коррекция, инверсия цвета, регулировка яркости и многое другое.

Обычно подэлементы <feFuncR>, <feFuncG>, <feFuncB> и <feFuncA> используются с <feComponentTransfer>. Они определяют функции преобразования для красного, зеленого, синего и альфа-каналов соответственно и могут содержать такие атрибуты, как 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

На рисунке показано исходное изображение (а) и изображения, обработанные фильтром feComponentTransfer (b, c).

Text «Результат применения фильтра feComponentTransfer»

Смотрите также

  • Вы можете скачать полные примеры и файлы данных с GitHub.
  • О загрузке с GitHub и запуске примеров вы узнаете из раздела Как запускать примеры.
  • Дополнительные сведения о примитивах фильтров вы найдете на странице W3C Filter Effects Module и статье Фильтры и градиенты SVG.
  • Aspose.SVG предлагает бесплатные Веб-приложения SVG для конвертации 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.