Эффекты освещения SVG – Фильтры SVG – Код C#

Световые эффекты SVG – SVG Lighting Effects

Aspose.SVG for .NET позволяет создавать различные световые эффекты для повышения визуальной привлекательности графики и иллюстраций. Эффекты освещения могут добавить глубину, реализм и ощущение освещения плоским изображениям. Эффект освещения создается в SVG с помощью набора фильтров. Рассмотрим некоторые из них: <feSpecularLighting> и <fePointLight>. Вы можете комбинировать несколько фильтров, создавать и контролировать детали светового эффекта.

В этой статье вы узнаете, как писать код SVG для создания эффектов освещения SVG, и рассмотрите подробные примеры C# использования пространства имен Aspose.Svg.Filters для применения эффектов освещения к элементам или растровым изображениям SVG.

Точечный источник света – код SVG

Фильтр <fePointLight> определяет источник света, который устанавливает точечный световой эффект. Его можно использовать внутри примитива <feDiffuseLighting> или <feSpecularLighting> в качестве дочернего элемента. Специальные атрибуты x, y и z указывают положение точечного источника света. Фильтр <feSpecularLighting> освещает изображение, используя его альфа-канал в качестве карты рельефа. Рассмотрим пример светового эффекта в формате 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>

В этом примере для создания эффекта освещения применяются четыре SVG-фильтра (рисунок b):

1. <feGaussianBlur> принимает входные данные SourceAlpha, которые являются альфа-каналом исходного изображения. Результат сохраняется во временном буфере с именем blur.
2. Освещение осуществляется с помощью примитивов фильтров <feSpecularLighting> и <fePointLighting>. <feSpecularLighting> использует буфер blur в качестве модели рельефа поверхности и генерирует эффект освещения из точечного источника, который установлен в фильтре <fePointLighting>. Результат сохраняется в буфере как light.
3. Фильтр <feComposite> принимает два входных параметра in ="SourceGraphic" и in2 ="light" и выполняет их комбинацию с помощью арифметической операции композиции. Выходные данные арифметического оператора для каждого пикселя результата вычисляются как k1·in1·in2 + k2·in1 + k3·in2 + k4

Если мы удалим фильтр размытия по Гауссу в коде фильтра light (рисунок b), мы получим flat-light фильтр, который дает более плоский свет (рисунок 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 (light фильтр), что и в приведенном выше коде SVG. Давайте рассмотрим код C# шаг за шагом:

1. Создайте экземпляр класса SVGDocument.
2. Свойство RootElement класса SVGDocument указывает на корневой элемент документа <svg>.
3. Создайте элемент <defs> и добавьте его к элементу <svg>:
   • Используйте метод CreateElementNS(namespaceURI, qualifiedName), чтобы создать экземпляр класса SVGDefsElement.
   • Используйте метод AppendChild(), чтобы добавить элемент <defs> к элементу <svg>.
4. Создайте элемент <filter>, установите атрибут id и добавьте <filter> к элементу <defs>:
   • Используйте метод CreateElementNS(), чтобы создать экземпляр класса SVGFilterElement.
   • Установите filterElement.Id для элемента <filter>. Используйте свойство Id класса SVGElement.
   • Используйте метод AppendChild(), чтобы добавить <filter> к элементу <defs>.
5. Создайте элемент <feGaussianBlur> и установите атрибуты in, result и stdDeviation. Затем добавьте его в элемент <filter>.
   • Используйте метод CreateElementNS(), чтобы создать экземпляр класса SVGFEGaussianBlurElement.
   • Вызовите метод SetAttribute(name, value), чтобы установить атрибуты in1 и result.
   • Используйте свойства StdDeviationX и StdDeviationY класса SVGFEGaussianBlurElement, чтобы установить атрибут setDerivation.
   • Используйте метод AppendChild(), чтобы добавить <feGaussianBlur> к элементу <filter>.
6. Таким же образом создайте элементы <feSpecularLighting>, <fePointLight> и <feComposite>. Укажите их обязательные атрибуты и добавьте эти элементы в фильтр в правильном порядке.
7. Создайте элемент <rect> с атрибутами и добавьте его к элементу <svg>:
   • Вы можете использовать метод CreateElementNS() для создания экземпляра класса SVGRectElement.
   • Установите атрибуты, определяющие его положение, размер и заливку. Использование атрибута filter, ссылающегося на URL-адрес атрибута id в filterElement, позволяет применить эффект освещения 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 выше.

See also

• Вы можете загрузить полные примеры и файлы данных с GitHub.
• О загрузке с GitHub и запуске примеров вы узнаете из раздела Как запускать примеры.
• Дополнительные сведения о примитивах фильтров вы найдете на странице W3C Filter Effects Module и статье Фильтры и градиенты SVG.