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;

 1// Configure an SVG document's style with external font-face rules in C# using Rule Builder
 2
 3// Initialize an SVG document
 4using (SVGDocument document = new SVGDocument())
 5{
 6    // Create an <svg> element and use Builder API to add other rules and elements to it
 7    SVGSVGElement 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
32    // Save the SVG document
33    document.Save(Path.Combine(OutputDir, "font-face.svg"));
34}

Example-ConfigureSvgStyleUsingRuleFontFace.cs hosted with ❤ by GitHub

Текст «визуализация файла 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;

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

Example-CreateStyledSvgWithRuleBuilderApi.cs hosted with ❤ by GitHub

Заключение

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