Эффект тени – Фильтры 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;
...
    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

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

        // Creating a <filter> element and add to the defsElement
        var 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
        var 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
        var 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
        var 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
        var 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;
...

    using (var 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
        var 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);
        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;
...

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

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

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

        // Creating a <filter> element and add to the defsElement
        var 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
        var 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
        var 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;
...

    using (var 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
        var 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 и запуске примеров вы узнаете из раздела Как запускать примеры.