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:

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

// Configure an SVG document's style with external font-face rules in C# using Rule Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element and use Builder API to add other rules and elements to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
        
       .AddDefs(def => def
            .AddStyle(st => st
                .Type("text/css")
                .AddRule("@font-face", r => r
                    .FontFamily("VeinlineRegular")
                    .Attribute("src", "url(https://assets.ithillel.ua/wiki/VeinlineRegular.ttf)")
                )
                .AddRule("text", t => t
                    .FontFamily("VeinlineRegular")
                    .FontSize(30, LengthType.Pt)
                )
            )
        )
            .AddText(t => t
            .X(20).Y(60).Fill(Color.DarkRed).FontWeight(FontWeight.Bold)
            .AddContent("Configure SVG Style")
            )
            .AddText(t => t
            .X(20).Y(150)
            .AddContent("Set your SVG style with Rule Builder!")
            )
        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "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.

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

// Create SVG with styled circle and text elements using C# Rule Builder API and fluent syntax

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element and use Builder API to add other rules and elements to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
       
        .AddStyle(st => st
            .AddRule("circle", r => r
                .Fill(paint: Paint.None)
                .Stroke(color: Color.DarkRed)
                .StrokeWidth(60)
            )
            .AddRule("text", t => t
                .Fill(color: Color.Red)
                .Stroke(color: Color.Teal)
                .StrokeWidth(1)
                .FontFamily("Arial")
                .FontSize(30, LengthType.Pt)
            )
        )
        .AddG(g => g
            .AddCircle(circle => circle.Cx(100).Cy(130).R(60).StrokeDashArray(2, 14))
            .AddText("Rule Builder", x: 230, y: 140)
        )
        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "rule-builder.svg"));
}

Заключение

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 при заполнении их краской, узором или градиентом.