Helpful resources ▼
  Download   Pricing   Buy

Rule Builder – Создание CSS-правил SVG в C#

Правила стиля SVG в C#

SVG-документы поддерживают CSS-стили через элемент <style>, позволяя разработчикам применять переиспользуемые визуальные правила к SVG-графике. С помощью Aspose.SVG Builder API можно программно настраивать SVG-стили в C# без ручного написания CSS-строк.

В этой статье объясняется, как создавать правила стиля SVG в C#, применять CSS-селекторы к SVG-элементам, настраивать пользовательские шрифты и программно управлять переиспользуемыми SVG-стилями с помощью Aspose.SVG for .NET.

Что такое RuleBuilder?

RuleBuilder является частью Aspose.SVG Builder API и используется для программной настройки CSS-деклараций в правилах стиля SVG. Вместе с SVGStyleElementBuilder он позволяет разработчикам:

Централизованные CSS-правила упрощают сопровождение SVG и уменьшают дублирование кода стилизации.

Создание правил стиля SVG в C#

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

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

1using Aspose.Svg.Builder;
2using System.Drawing;
3using System.IO;
 1// Configure SVG styles with external @font-face rules using Rule Builder in C#
 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 файла шрифта.

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

Метод AddRule()

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

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

Builders within Builders

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

Следующий фрагмент показывает, как использовать RuleBuilder, пример builder внутри builder, для программного создания и стилизации SVG-графики:

1using Aspose.Svg.Builder;
2using System.Drawing;
3using System.IO;
 1// Create styled SVG circle and text elements using the Rule Builder API in C#
 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

Как работают правила стиля

Метод AddRule() создает переиспользуемые CSS-правила внутри SVG-элемента <style>. В этом примере:

Такой подход отделяет логику стилизации от SVG-структуры и улучшает читаемость SVG.

Частые ошибки и исправления

ПроблемаВозможная причинаРекомендуемое исправление
SVG-стили не применяютсяНеверный CSS-селекторУбедитесь, что AddRule() нацелен на правильный SVG-элемент
Пользовательский шрифт не отображаетсяНеверный URL шрифтаПроверьте путь и доступность файла шрифта
Отображение текста отличается на разных системахТребуемый шрифт недоступенИспользуйте встроенные или загружаемые из web шрифты
SVG-элементы игнорируют правила стиляInline-атрибуты переопределяют CSSУдалите конфликтующие inline-стили
Отсутствуют стили обводки или заливкиНеверная настройка свойства стиляПроверьте правила Fill() и Stroke()

FAQ

1. RuleBuilder лучше inline-стилей SVG?
Для сложной SVG-графики переиспользуемые CSS-правила обычно проще сопровождать, чем повторяющиеся inline-атрибуты. Rule Builder помогает централизовать логику стилизации SVG и сократить дублирование кода.

2. Можно ли стилизовать SVG-классы и ID с помощью RuleBuilder?
Да. AddRule() поддерживает стандартные CSS-селекторы, включая селекторы элементов, классов и ID.

3. Зачем использовать CSS-правила внутри SVG вместо внешних CSS-файлов?
Встроенные SVG-стили делают SVG-графику самодостаточной и более удобной для повторного использования в приложениях, экспортах и самостоятельных SVG-файлах.

4. Можно ли повторно использовать один и тот же SVG-блок стилей для нескольких элементов?
Да. Один SVG-блок <style> может применять переиспользуемые правила к нескольким SVG-элементам через общие селекторы.

Дополнительные ресурсы

Path Builder Paint Builder