Helpful resources ▼
  Download   Pricing   Buy

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

SVG фильтры

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

В этой статье вы узнаете, как написать код 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 примитивы фильтра

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

 1<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3        <filter id="shadow" x="-20" y="-20" height="150" width="150" >
 4            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
 5            <feGaussianBlur result="blur" in="offset" stdDeviation="3" />
 6            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
 7        </filter>
 8    </defs>
 9    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow)" />
10</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 определяет режим смешивания.

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

Text «Эффект тени для оранжевого прямоугольника – пошаговая иллюстрация»

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

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

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

Text «Эффект тени для оранжевого прямоугольника с цветной тенью»

Примечание. Если атрибут 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(), чтобы сохранить документ с фильтром тени в локальный файл.
 1using Aspose.Svg;
 2using System.IO;
 3using Aspose.Svg.Filters;
 4...
 5    // Set SVG Namespace Url
 6    string SvgNamespace = "http://www.w3.org/2000/svg";
 7
 8    using (var document = new SVGDocument())
 9    {
10        var svgElement = document.RootElement;
11
12        // Create a <defs> element and add to the svgElement
13        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
14        svgElement.AppendChild(defsElement);
15
16        // Creating a <filter> element and add to the defsElement
17        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
18        filterElement.Id = "shadow";
19        filterElement.SetAttribute("x", "-20px");
20        filterElement.SetAttribute("y", "-20px");
21        filterElement.SetAttribute("height", "150px");
22        filterElement.SetAttribute("width", "150px");
23        defsElement.AppendChild(filterElement);
24
25        // Create a <feOffset> filter primitive and add it to the filterElement
26        var feOffsetElement = (SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
27        feOffsetElement.In1.BaseVal = "SourceAlpha";
28        feOffsetElement.SetAttribute("result", "offset");
29        feOffsetElement.SetAttribute("dx", "10");
30        feOffsetElement.SetAttribute("dy", "10");
31        filterElement.AppendChild(feOffsetElement);
32
33        // Create a <feGaussianBlur> filter primitive and add it to the filterElement
34        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
35        feGaussianBlurElement.In1.BaseVal = "offset";
36        feGaussianBlurElement.StdDeviationX.BaseVal = 3;
37        feGaussianBlurElement.StdDeviationY.BaseVal = 3;
38        feGaussianBlurElement.SetAttribute("result", "blur");
39        filterElement.AppendChild(feGaussianBlurElement);
40
41        // Create a <feBlend> filter primitive and add it to the filterElement
42        var feBlendElement = (SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
43        feBlendElement.In1.BaseVal = "SourceGraphic";
44        feBlendElement.In2.BaseVal = "blur";
45        feBlendElement.SetAttribute("mode", "normal");
46        filterElement.AppendChild(feBlendElement);
47
48        // Create a <rect> element and set the "fill" and "filter" attributes
49        var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
50        rectElement.X.BaseVal.Value = 40;
51        rectElement.Y.BaseVal.Value = 40;
52        rectElement.Width.BaseVal.Value = 100;
53        rectElement.Height.BaseVal.Value = 100;
54        rectElement.SetAttribute("fill", "#ffa500");
55        rectElement.SetAttribute("filter", "url(#shadow)");
56        svgElement.InsertBefore(rectElement, svgElement.FirstChild);
57
58        // Save the document
59        document.Save(Path.Combine(OutputDir, "drop-shadow-effect.svg"));
60    }

Когда вы запустите этот код 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:

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5
 6    using (var document = new SVGDocument())
 7    {
 8        // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
 9        var svg = new SVGSVGElementBuilder()
10            .Width(400).Height(400)
11            .AddDefs(d => d
12                .AddFilter(f => f.Id("shadow").Width(150).Height(150)
13                    .AddFeDropShadow(sh => sh
14                        .Dx(10).Dy(10)
15                        .StdDeviation(3)
16                    )
17                )
18            )
19            .AddRect(r => r
20                .Rect(40, 40, 100, 100)
21                .Filter(f => f.FilterId("shadow"))
22                .Style(s => s.Fill(Color.Orange))
23            )
24            //Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
25            .Build(document.FirstChild as SVGSVGElement);
26        document.Save(Path.Combine(OutputDir, "drop-shadow-builder.svg"));
27    }

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

Text “Эффект тени для оранжевого прямоугольника – визуализация файла drop-shadow-builder.svg”

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

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

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

 1using Aspose.Svg;
 2using System.IO;
 3using Aspose.Svg.Filters;
 4...
 5
 6    // Set SVG Namespace Url
 7    string SvgNamespace = "http://www.w3.org/2000/svg";
 8
 9    using (var document = new SVGDocument())
10    {
11        var svgElement = document.RootElement;
12
13        // Create a <defs> element and add to the svgElement
14        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
15        svgElement.AppendChild(defsElement);
16
17        // Creating a <filter> element and add to the defsElement
18        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
19        filterElement.Id = "text-shadow";
20        filterElement.SetAttribute("x", "-20px");
21        filterElement.SetAttribute("y", "-20px");
22        filterElement.SetAttribute("height", "150px");
23        filterElement.SetAttribute("width", "150px");
24        defsElement.AppendChild(filterElement);
25
26        // Create a <feDropShadow> filter primitive and add it to the filterElement
27        var feDropShadowElement = (SVGFEDropShadowElement)document.CreateElementNS(SvgNamespace, "feDropShadow");
28        feDropShadowElement.StdDeviationX.BaseVal = 3;
29        feDropShadowElement.StdDeviationY.BaseVal = 3;
30        feDropShadowElement.SetAttribute("dx", "3");
31        feDropShadowElement.SetAttribute("dy", "3");
32        feDropShadowElement.SetAttribute("flood-color", "LightCoral");
33        filterElement.AppendChild(feDropShadowElement);
34
35        // Create a <text> element and add it to the svgElement
36        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
37        textElement.Style.FontSize = "4em";
38        textElement.SetAttribute("x", "20px");
39        textElement.SetAttribute("fill", "CornflowerBlue");
40        textElement.SetAttribute("y", "100px");
41        textElement.TextContent = "Drop Shadow Effect";
42        textElement.SetAttribute("filter", "url(#text-shadow)");
43        svgElement.InsertBefore(textElement, svgElement.FirstChild);
44
45        // Save the document
46        document.Save(Path.Combine(OutputDir, "text-drop-shadow.svg"));
47    }

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

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

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5
 6    using (var document = new SVGDocument())
 7    {
 8        // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
 9        var svg = new SVGSVGElementBuilder()
10            .AddDefs(d => d
11                .AddFilter(f => f.Id("shadow").Width(150).Height(150)
12                    .AddFeDropShadow(sh => sh
13                        .Dx(3).Dy(3)
14                        .StdDeviation(3)
15                        .FloodColor(Color.LightCoral)
16                    )
17                )
18            )
19            .AddText(t => t.X(20).Y(100).Fill(Color.CornflowerBlue).FontSize(48, LengthType.Pt)
20                .Filter(f => f.FilterId("shadow"))
21                .AddContent("Drop Shadow Effect")
22            )
23            
24            // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
25            .Build(document.FirstChild as SVGSVGElement);
26        document.Save(Path.Combine(OutputDir, "text-drop-shadow-builder.svg"));
27    }

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

Text «К тексту применен эффект тени – Эффект тени»

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

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

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

Get monthly newsletters & offers directly delivered to your mailbox.

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