Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
Rule Builder – Создание CSS-правил SVG в C#
Contents
[
Hide
Show
]Правила стиля 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 он позволяет разработчикам:
- создавать SVG-элементы
<style>; - определять переиспользуемые CSS-селекторы;
- настраивать стили заливки и обводки SVG;
- применять параметры типографики;
- создавать переиспользуемые визуальные темы для SVG-графики.
Централизованные 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 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}
Правило @font-face
CSS-правило @font-face позволяет указать шрифты для отображения текста, которые могут быть загружены с удаленного сервера или с компьютера пользователя. Правило определяет имя пользовательского семейства шрифтов и указывает исходный URL файла шрифта.
- Метод
FontFamily() задает CSS-свойство
font-familyв сгенерированном правиле стиля. Он указывает имя шрифта, которое будет использоваться для подходящих текстовых элементов. - Метод
Attribute() класса
RuleBuilderзадает CSS-дескрипторsrcвнутри правила@font-faceс исходным URL файла шрифта.
В приведенном выше примере правило @font-face определяет пользовательское семейство шрифтов с именем "VeinlineRegular". Это правило гарантирует, что шрифт загружен и доступен для использования в SVG-документе.
Метод AddRule()
Метод
AddRule() принадлежит SVGStyleElementBuilder и позволяет создавать CSS-правила в SVG-документах. Он принимает два параметра: имя CSS-селектора и лямбда-выражение, определяющее свойства стиля с помощью RuleBuilder.
В приведенном выше C# примере добавляются два правила:
- Первое правило определяет @font-face и гарантирует доступность шрифта VeinlineRegular.
- Второе правило применяет семейство шрифтов VeinlineRegular и задает размер шрифта 30 пунктов для всех текстовых элементов в SVG.
Builders within Builders
SVG Builder API использует синтаксический сахар для дальнейшего упрощения процесса создания и манипулирования SVG. Это включает в себя вложенные builders для различных элементов SVG, обеспечивая более интуитивный и эффективный способ определения сложных структур. Шаблон «builder внутри builder» предполагает использование нескольких классов-конструкторов, где один конструктор вложен в другой для облегчения создания сложных объектов или структур.
Следующий фрагмент показывает, как использовать RuleBuilder, пример builder внутри builder, для программного создания и стилизации SVG-графики:
- Внутри SVGSVGElementBuilder добавляется блок стиля с помощью метода AddStyle().
- Метод
AddRule() класса
SVGStyleElementBuilderопределяет CSS-правила по селектору, например “circle” или “text”. Внутри каждого лямбда-выражения RuleBuilder настраивает декларации, такие как цвет заливки, цвет обводки и семейство шрифтов для совпадающих 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}Как работают правила стиля
Метод AddRule() создает переиспользуемые CSS-правила внутри SVG-элемента <style>. В этом примере:
- селектор
"circle"стилизует все SVG-элементы circle; - селектор
"text"настраивает типографику SVG-текста; - правила стиля автоматически применяются к совпадающим SVG-элементам.
Такой подход отделяет логику стилизации от 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-элементам через общие селекторы.
Дополнительные ресурсы
- Статья Программное изменение SVG-стилей в C# объясняет, как программно изменять и нормализовать SVG-стили в C# с помощью Aspose.SVG, используя манипуляции на основе DOM и перезапись атрибутов.
- Статья Element Builders подробно рассматривает Element Builders, используемые в SVG Builder API. Вы узнаете о классе SVGElementBuilder, его специализированных конструкторах и о том, как они упрощают программирование SVG.
- Пожалуйста, ознакомьтесь со статьей Path Builder, чтобы узнать больше о классе PathBuilder, предназначенном для упрощения создания и манипулирования SVG-путями. В статье показано, как Path Builder предлагает интуитивно понятный синтаксис для программного определения путей SVG, позволяя разработчикам оптимизировать процесс создания сложных фигур и кривых.
- Статья
Paint Builder посвящена PaintBuilder, классу-конструктору для создания значений заливки для SVG-элементов. Этот класс используется для задания значений атрибутов
strokeилиfillдля различных фигур и элементов SVG при их заполнении цветом, узором или градиентом. - Статья SVG Builder API объясняет, как SVG Builder API решает задачи сложности, ясности кода и универсальности при манипулировании SVG.