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

SVG фильтры

Aspose.SVG for .NET позволяет открывать, создавать или редактировать документ SVG и вносить изменения в его содержимое. Вы можете применить множество доступных фильтров SVG к элементам или растровым изображениям SVG, чтобы получить желаемый результат. Пространство имен Aspose.Svg.Filters содержит классы и интерфейсы, связанные с эффектами фильтров в спецификации SVG. Чтобы создать эффект тени, вы можете использовать несколько примитивов фильтров:

• класс SVGFEDropShadowElement для создания элемента <feDropShadow> для реализации эффекта тени;
• класс SVGFEOffsetElement для создания элемента <feOffset> для смещения слоя в SVG;
• класс SVGFEGaussianBlurElement соответствует элементу <feGaussianBlur> для реализации эффекта размытия по Гауссу;
• SVGFEBlendElement для создания элемента <feBlend> для смешивания двух или более объектов.

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

Эффект тени – Drop Shadow – код SVG

Эффект тени в SVG – это распространенный визуальный эффект, используемый для создания иллюзии тени позади элемента SVG. Он обеспечивает глубину и реалистичность содержимого SVG, создавая впечатление, будто элемент плавает над фоном. Кроме того, эффект тени можно использовать, чтобы выделить изображение. Есть несколько способов реализовать эффект тени в SVG. Давайте посмотрим на два из них.

Примечание. В SVG фильтр определяется элементом <filter>, который устанавливается внутри элемента <defs>. Он никогда не отображается сам по себе и концептуально описывается как элемент, включающий в себя дочерние элементы – примитивы фильтра. Элемент <filter> имеет набор атрибутов. Обязательными атрибутами примитива фильтра являются x, y, width, height и id. Они задают область изображения, к которой будет применен фильтр. А атрибут id дает уникальный идентификатор элементу SVG и идентифицирует элемент в документе SVG.

feOffset + feGaussianBlur + feBlend примитивы фильтра

На наш взгляд, наиболее эффективно использовать три фильтра для достижения эффекта тени. Это позволит вам точно настроить эффект, даже если для этого потребуется больше кода:

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="shadow" x="-20" y="-20" height="150" width="150" >
            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
            <feGaussianBlur result="blur" in="offset" stdDeviation="3" />
            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
        </filter>
    </defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow)" />
</svg>

Для создания эффекта тени используются три фильтра (рис. c):

1. Примитив фильтра <feOffset> используется для смещения слоя в SVG. Он принимает in="SourceAlpha" и сдвигает результат на 10 пикселей вправо и на 10 пикселей вниз и сохраняет результат в буфере как "offset". Обратите внимание, что в качестве входных данных используется альфа-канал фигуры. Значение SourceAlpha приводит к результату черного цвета (рисунок а).
2. <feGaussianBlur> принимает in="offset", применяет размытие stdDeviation="3" и сохраняет результат во временном буфере с именем "blur".
3. Фильтр <feBlend> смешивает два объекта; он принимает два входных сигнала in="SourceGraphic" и in2="blur", а затем смешивает SourceGraphic поверх смещенного черного размытого изображения (рис. b). Его атрибут mode определяет режим смешивания.

На следующем рисунке показано пошаговое создание тени:

Примитив фильтра feDropShadow

В SVG эффект тени может быть достигнут с помощью примитива фильтра feDropShadow в элементе <filter>. Элемент <feDropShadow> имеет атрибуты, необходимые для создания тени, такие как dx, dy и stdDeviation, а также позволяет добавлять цвет и прозрачность к тени! Это достигается с помощью атрибутов flood-color и flood-opacity. Давайте посмотрим, как создать эффект тени, используя примитив фильтра feDropShadow:

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
	<defs>
        <filter id="shadow-red" x="-20" y="-20" height="100" width="100" >
			<feDropShadow dx="10" dy="10" stdDeviation="3"  flood-color="CornflowerBlue" />
		</filter>
	</defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow-red)" />
</svg>

Примечание. Если атрибут flood-color не указан или указан неправильно, то тень по умолчанию будет черной.

Эффект тени – код C#

Здесь мы напишем код С# для создания эффекта тени для оранжевого прямоугольника с помощью трех примитивов фильтра.

В следующем фрагменте кода показано, как создать эффект тени с помощью API Aspose.SVG для .NET.

1. Используйте конструктор SVGDocument(), чтобы создать пустой документ SVG.
2. Свойство RootElement класса SVGDocument указывает на корневой элемент документа <svg>.
3. Создайте элемент <defs> и добавьте его к элементу <svg>:
   • Используйте метод CreateElementNS(), чтобы создать экземпляр класса SVGDefsElement.
   • Используйте метод AppendChild(), чтобы добавить элемент <defs> к элементу <svg>.
4. Создайте элемент <filter>, установите атрибуты и добавьте его к элементу <defs>:
   • Используйте метод CreateElementNS() класса SVGDocument, чтобы создать экземпляр класса SVGFilterElement.
   • Вызовите метод SetAttribute(name, value), чтобы установить атрибуты x, y, height и width.
   • Не забудьте установить атрибут id.
   • Используйте метод AppendChild(), чтобы добавить <filter> к элементу <defs>.
5. Создайте элемент <feOffset>, установите атрибуты и добавьте его к элементу <filter>:
   • Используйте метод CreateElementNS() класса SVGDocument, чтобы создать экземпляр класса SVGFEOffsetElement.
   • Вызовите метод SetAttribute(name, value), чтобы установить атрибуты dx, dy и result.
   • Не забудьте установить атрибут in1. Используйте свойство типа SVGAnimatedLength, статические данные для которого можно задать или прочитать через конструкцию feOffsetElement.In1.BaseVal = "SourceAlpha".
   • Используйте метод AppendChild(), чтобы добавить <feOffset> к элементу <filter>.
6. Аналогичным образом создайте, задайте атрибуты и добавьте к элементу <filter> такие элементы, как <feGaussianBlur> и <feBlend>.
7. Создайте прямоугольный элемент <rect>, который будет фигурой SVG с эффектом тени. Ему присваивается цвет заливки (#ffa500 – оранжевый), а атрибуту filter присваивается значение "url(#shadow)", ссылаясь на ранее определенный фильтр с Id = "shadow".
8. Вызовите метод Save(), чтобы сохранить документ с фильтром тени в локальный файл.

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

// Apply drop shadow effect for an SVG rectangle using 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 it to the svgElement
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add it to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "shadow";
    filterElement.SetAttribute("x", "-20px");
    filterElement.SetAttribute("y", "-20px");
    filterElement.SetAttribute("height", "150px");
    filterElement.SetAttribute("width", "150px");
    defsElement.AppendChild(filterElement);

    // Create a <feOffset> filter primitive and add it to the filterElement
    SVGFEOffsetElement feOffsetElement = (SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
    feOffsetElement.In1.BaseVal = "SourceAlpha";
    feOffsetElement.SetAttribute("result", "offset");
    feOffsetElement.SetAttribute("dx", "10");
    feOffsetElement.SetAttribute("dy", "10");
    filterElement.AppendChild(feOffsetElement);

    // Create a <feGaussianBlur> filter primitive and add it to the filterElement
    SVGFEGaussianBlurElement feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
    feGaussianBlurElement.In1.BaseVal = "offset";
    feGaussianBlurElement.StdDeviationX.BaseVal = 3;
    feGaussianBlurElement.StdDeviationY.BaseVal = 3;
    feGaussianBlurElement.SetAttribute("result", "blur");
    filterElement.AppendChild(feGaussianBlurElement);

    // Create a <feBlend> filter primitive and add it to the filterElement
    SVGFEBlendElement feBlendElement = (SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
    feBlendElement.In1.BaseVal = "SourceGraphic";
    feBlendElement.In2.BaseVal = "blur";
    feBlendElement.SetAttribute("mode", "normal");
    filterElement.AppendChild(feBlendElement);

    // 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 = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "#ffa500");
    rectElement.SetAttribute("filter", "url(#shadow)");
    svgElement.InsertBefore(rectElement, svgElement.FirstChild);

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

Когда вы запустите этот код C#, он создаст файл SVG с эффектом тени для оранжевого прямоугольника. Тень будет черного цвета, смещенная на 10 единиц по горизонтали и 10 единиц по вертикали от исходного прямоугольника. Полученный файл drop-shadow-effect.svg выглядит как рисунок c – оранжевый прямоугольник с черной тенью.

Эффект тени с использованием API SVG Builder

API Aspose.SVG Builder предназначен для упрощенного создания и редактирования элементов SVG на C#. Давайте рассмотрим С#-пример реализации эффекта тени (точно тот же пример, что и в предыдущем параграфе) с использованием SVG Builder API. Следующий код демонстрирует использование шаблона свободного компоновщика (fluent builder pattern) для создания кратких и читаемых документов SVG, используя возможности библиотеки Aspose.SVG:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create an SVG <rect> with drop shadow using SVG Builder in C#

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
    SVGSVGElement svg = new SVGSVGElementBuilder()
        //.Width(400).Height(400)
        .AddDefs(d => d
            .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                .AddFeDropShadow(sh => sh
                    .Dx(10).Dy(10)
                    .StdDeviation(3)
                )
            )
        )
        .AddRect(r => r
            .Rect(40, 40, 100, 100)
            .Filter(f => f.FilterId("shadow"))
            .Style(s => s.Fill(Color.Orange))
        )
        // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
        .Build(document.FirstChild as SVGSVGElement);
    //.Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "drop-shadow-builder.svg"));
}

Шаблон Fluent builder позволяет создавать элементы SVG и применять фильтры более лаконичным и удобочитаемым способом. Каждый вызов метода, например .AddFilter или .AddRect, четко указывает его цель, позволяя с первого взгляда понять структуру документа SVG. Этот пример демонстрирует более выразительный подход к созданию документов SVG с помощью SVG Builder, обеспечивающий улучшенную читаемость, удобство обслуживания и гибкость по сравнению с ручным подходом к созданию элементов, показанным в предыдущем примере. В результате работы кода мы получаем тот самый оранжевый прямоугольник с черной тенью:

Текст c тенью – Text Drop Shadow

В этом примере C# создается файл SVG, аналогичный тому, который мы видели ранее в разделе примитив фильтра feDropShadow. Только здесь мы используем примитив фильтра feDropShadow для создания цветной тени для текста SVG, а не для оранжевого прямоугольника.

В следующем фрагменте кода показано, как создать тень текста с помощью API Aspose.SVG для .NET:

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

// Add a colored drop shadow effect to <text> in SVG programmatically

// 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 it to the svgElement
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add it to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "text-shadow";
    filterElement.SetAttribute("x", "-20px");
    filterElement.SetAttribute("y", "-20px");
    filterElement.SetAttribute("height", "150px");
    filterElement.SetAttribute("width", "150px");
    defsElement.AppendChild(filterElement);

    // Create a <feDropShadow> filter primitive and add it to the filterElement
    SVGFEDropShadowElement feDropShadowElement = (SVGFEDropShadowElement)document.CreateElementNS(SvgNamespace, "feDropShadow");
    feDropShadowElement.StdDeviationX.BaseVal = 3;
    feDropShadowElement.StdDeviationY.BaseVal = 3;
    feDropShadowElement.SetAttribute("dx", "3");
    feDropShadowElement.SetAttribute("dy", "3");
    feDropShadowElement.SetAttribute("flood-color", "LightCoral");
    filterElement.AppendChild(feDropShadowElement);

    // Create a <text> element and add it to the svgElement
    SVGTextElement textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
    textElement.Style.FontSize = "4em";
    textElement.SetAttribute("x", "20px");
    textElement.SetAttribute("fill", "CornflowerBlue");
    textElement.SetAttribute("y", "100px");
    textElement.TextContent = "Drop Shadow Effect";
    textElement.SetAttribute("filter", "url(#text-shadow)");
    svgElement.InsertBefore(textElement, svgElement.FirstChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "text-drop-shadow.svg"));
}

Тень текста – использование SVG Builder

Точно такой же пример для текста с цветной тенью, но мы реализуем его с помощью Aspose.SVG Builder:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Add a colored drop shadow effect to <text> in SVG using SVG Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .AddDefs(d => d
            .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                .AddFeDropShadow(sh => sh
                    .Dx(3).Dy(3)
                    .StdDeviation(3)
                    .FloodColor(Color.LightCoral)
                )
            )
        )
        .AddText(t => t.X(20).Y(100).Fill(Color.CornflowerBlue).FontSize(48, LengthType.Pt)
            .Filter(f => f.FilterId("shadow"))
            .AddContent("Drop Shadow Effect")
        )

        // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "text-drop-shadow-builder.svg"));
}

Полученные изображения text-drop-shadow.svg и text-drop-shadow-builder.svg выглядят следующим образом:

Текст имеет тень с цветом заливки LightCoral и радиусом размытия 3 единицы. Тень будет смещена на 3 единицы по горизонтали и на 3 единицы по вертикали от текста, создавая визуально привлекательный эффект тени.

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

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