Rule Builder – Настройка стиля SVG – C#

SVG Style

Элемент SVG <style> используется для определения внутренних стилей в документе SVG. Он позволяет разработчикам применять правила CSS непосредственно к элементам SVG, обеспечивая удобный способ управления внешним видом графики SVG.

Aspose.SVG Builder API предлагает класс SVGStyleElementBuilder, который является конструктором элементов для создания элемента SVG <style>. Этот класс облегчает создание и настройку элемента SVG <style> с помощью правил CSS.

Эта статья посвящена классу RuleBuilder, который представляет собой класс-построитель для создания правил стилей CSS. Этот класс используется для динамического создания строки стилей CSS путем установки различных атрибутов и их значений.

Построитель правил – класс RuleBuilder

RuleBuilder позволяет разработчикам применять правила CSS к документам SVG программным способом в коде C#, обеспечивая гибкость и контроль над визуальным внешним видом элементов SVG. В этом примере показано, как создать элемент SVG <style>, добавить к нему правило CSS @font-face и использовать метод AddRule() для определения стилей шрифтов для текстовых элементов в документе SVG:

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5    using (var document = new SVGDocument())
 6    {
 7        var svg = new SVGSVGElementBuilder()
 8            
 9            .AddDefs(def => def
10                .AddStyle(st => st
11                    .Type("text/css")
12                    .AddRule("@font-face", r => r
13                        .FontFamily("VeinlineRegular")
14                        .Attribute("src", "url(https://assets.ithillel.ua/wiki/VeinlineRegular.ttf)")
15                    )
16                    .AddRule("text", t => t
17                        .FontFamily("VeinlineRegular")
18                        .FontSize(30, LengthType.Pt)
19                    )
20                )
21            )
22                .AddText(t => t
23                .X(20).Y(60).Fill(Color.DarkRed).FontWeight(FontWeight.Bold)
24                .AddContent("Configure SVG Style")
25                )
26                .AddText(t => t
27                .X(20).Y(150)
28                .AddContent("Set your SVG style with Rule Builder!")
29                )
30            .Build(document.FirstChild as SVGSVGElement);
31        document.Save(Path.Combine(OutputDir, "font-face.svg"));
32    }

Текст «визуализация файла font face.svg»

Правило @font-face

CSS-правило @font-face позволяет указать шрифты для отображения текста на веб-страницах, которые можно загрузить как с удаленного сервера, так и с компьютера пользователя. Правило определяет имя пользовательского семейства шрифтов и указывает исходный URL-адрес файла шрифта.

Метод FontFamily() устанавливает атрибут font-family для элемента SVG. Он определяет имя шрифта, которое будет использоваться для установки свойств шрифта.
Метод Attribute() класса RuleBuilder устанавливает атрибут scr для <style> элемента с исходным URL-адресом файла шрифта.

В приведенном выше примере правило @font-face определяет пользовательское семейство шрифтов с именем «VeinlineRegular». Это правило гарантирует, что шрифт загружен и доступен для использования в документе SVG.

Метод AddRule()

Метод AddRule() является частью Rule Builder, который позволяет создавать правила CSS в SVG документах. Он принимает два параметра: имя селектора CSS и лямбда-выражение, определяющее свойства стиля с помощью RuleBuilder.

В приведенном выше примере C# добавлены два правила:

Первое правило определяет правило @font-face, которое гарантирует доступность шрифта VeinlineRegular.
Второе правило применяет семейство шрифтов VeinlineRegular и устанавливает размер шрифта 30 пунктов для всех текстовых элементов в SVG.

Строители внутри строителей

SVG Builder API представляет синтаксический сахар для дальнейшего совершенствования процесса создания и манипулирования SVG. Сюда входят вложенные построители для различных элементов SVG, обеспечивающие более интуитивно понятный и эффективный способ определения сложных структур SVG. Шаблон «строитель внутри строителя» предполагает использование нескольких классов строителя, где один конструктор вложен в другой, чтобы облегчить создание сложных объектов или структур.

В следующем фрагменте кода Rule Builder представляет собой пример реализации строителя внутри строителя. С# пример демонстрирует, как использовать RuleBuilder в Aspose.SVG для программного создания и стилизации графики SVG:

Внутри SVGSVGElementBuilder добавляется блок стиля с помощью метода AddStyle().
В RuleBuilder правила CSS определяются с помощью метода AddRule(), указывая селекторы (например, “circle”, “text”) и применяя свойства (например, цвет заливки, цвет обводки, семейство шрифтов) для целевых элементов SVG.

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5    // Initialize an SVG document
 6    using (var document = new SVGDocument())
 7    {
 8        // Create an <svg> element
 9        var svg = new SVGSVGElementBuilder()
10
11            .AddStyle(st => st
12                .AddRule("circle", r => r
13                    .Fill(paint: Paint.None)
14                    .Stroke(color: Color.DarkRed)
15                    .StrokeWidth(60)
16                )
17                .AddRule("text", t => t
18                    .Fill(color: Color.Red)
19                    .Stroke(color: Color.Teal)
20                    .StrokeWidth(1)
21                    .FontFamily("Arial")
22                    .FontSize(30, LengthType.Pt)
23                )
24            )
25            .AddG(g => g
26                .AddCircle(circle => circle.Cx(100).Cy(130).R(60).StrokeDashArray(2, 14))
27                .AddText("Rule Builder", x: 230, y: 140)
28            )
29            .Build(document.FirstChild as SVGSVGElement);
30
31        // Save the SVG document
32        document.Save(Path.Combine(OutputDir, "rule-builder.svg"));
33    }

Заключение

Aspose.SVG для .NET предоставляет функцию Rule Builder, которая позволяет разработчикам программно определять правила CSS для элементов SVG с помощью SVG Builder API.

Использование RuleBuilder класса упрощает процесс создания и применения стилей к элементам SVG, упрощая настройку внешнего вида графики SVG в коде C#.
RuleBuilder обеспечивает гибкость и контроль над визуальным внешним видом элементов SVG.
RuleBuilder работает как «строитель внутри строителя», что облегчает создание сложных объектов или структур и повышает читаемость кода, упрощая его понимание.

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

В статье Element Builders подробно рассматриваются конструкторы элементов, используемые в Aspose.SVG Builder API. Вы узнаете о классе SVGElementBuilder, его специализированных сборщиках и о том, как они упрощают программирование SVG.
Обратитесь к статье Path Builder, чтобы узнать больше о классе PathBuilder, предназначенном для упрощения создания и управления путями SVG. В статье показано, как PathBuilder предлагает интуитивно понятный синтаксис для программного определения путей SVG, что позволяет разработчикам упростить процесс создания сложных фигур и кривых.
Статья Paint Builder посвящена PaintBuilder, классу-построителю для создания значений краски для элементов SVG. Этот класс используется для указания значения атрибутов stroke или fill для различных фигур и элементов SVG при заполнении их краской, узором или градиентом.

Path Builder Paint Builder