Helpful resources ▼
  Download   Pricing   Buy

Paint Builder – Настройка SVG Fill и Stroke в C#

Что такое PaintBuilder?

Aspose.SVG Builder API позволяет программно настраивать SVG-свойства fill и stroke с помощью fluent syntax. Класс PaintBuilder упрощает создание SVG paint values, включая сплошные цвета и ссылки на paint servers, такие как patterns и gradients, в C# приложениях.

SVG paint configuration часто используется для переиспользуемых фонов, декоративных текстур, стилей диаграмм, заливок иконок и эффектов векторной графики. Вложенные builders и цепочки методов делают генерацию SVG более читаемой и удобной для сопровождения.

В этой статье объясняется, как использовать PaintBuilder, builder-класс для создания paint values для SVG-элементов. Он используется для задания значений атрибутов stroke или fill при применении цветов, patterns или gradients.

PaintBuilder является частью Aspose.SVG Builder API и используется для настройки SVG-значений fill и stroke. Он поддерживает несколько SVG paint values:

Builder API использует модель fluent configuration, которая упрощает создание и стилизацию SVG-элементов.

Создание SVG Pattern Fills

SVG patterns позволяют заполнять фигуры повторяющимися графическими элементами вместо сплошных цветов. Pattern определяется один раз и может использоваться несколькими SVG-элементами. В следующем примере PaintServerId() класса PaintBuilder задает значение fill как ссылку на paint server по его Id.

1using Aspose.Svg.Builder;
2using System.Drawing;
3using System.IO;
 1// Create an SVG pattern with polygons and use it as a rectangle fill in C#
 2
 3using (SVGDocument document = new SVGDocument())
 4{
 5    SVGSVGElement svg = new SVGSVGElementBuilder()
 6        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
 7        .ViewBox(0, 0, 400, 400)
 8        .AddG(g => g
 9            .AddPattern(p => p.Id("stars")
10                .ViewBox(0, 0, 20, 20)
11                .Width(5, LengthType.Percentage)
12                .Height(5, LengthType.Percentage)
13                .PatternUnits(CoordinateUnits.UserSpaceOnUse)
14                .AddPolygon(points: new double[] { 5, 0, 7, 3, 10, 5, 7, 7, 5, 10, 3, 7, 0, 5, 3, 3 }, fill: Color.Teal)
15                .AddPolygon(points: new double[] { 15, 0, 17, 3, 20, 5, 17, 7, 15, 10, 13, 7, 10, 5, 13, 3 }, fill: Color.DarkRed)
16                .AddPolygon(points: new double[] { 15, 10, 17, 13, 20, 15, 17, 17, 15, 20, 13, 17, 10, 15, 13, 13 }, fill: Color.DarkBlue)
17            )
18            .AddRect(r => r.Rect(20, 40, 440, 80).Fill(pt => pt.PaintServerId("stars")))
19            )
20        .Build(document.FirstChild as SVGSVGElement);
21    document.Save(Path.Combine(OutputDir, "pattern-stars.svg"));
22}
Example-CreateSvgPatternFillRectangle.cs hosted with ❤ by GitHub

В этом примере pattern сначала определяется с помощью AddPattern(), где цветные полигоны создают сложную заливку. Pattern получает идентификатор stars, а затем применяется к прямоугольнику через Fill() и PaintServerId("stars").

Визуализация pattern stars, примененного к SVG-прямоугольнику.

Применение Patterns к SVG-фигурам

Pattern fills можно применять к прямоугольникам, кругам, путям, полигонам и текстовым элементам. Любой SVG-элемент, поддерживающий fill, может использовать ссылку на paint server, созданную с PaintBuilder.

Следующий C# пример показывает, как создать SVG patterns и применить их к фигурам в документе. Код демонстрирует подход «builder внутри builder», при котором один класс-конструктор вложен в другой, что облегчает создание сложных объектов или структур и обеспечивает модульный и структурированный подход к созданию SVG-документов:

1using Aspose.Svg.Builder;
2using System.Drawing;
3using System.IO;
 1// Create reusable SVG patterns and apply them to circles using Paint Builder in C#
 2
 3using (SVGDocument document = new SVGDocument())
 4{
 5    SVGSVGElement svg = new SVGSVGElementBuilder()
 6        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
 7        .ViewBox(0, 0, 600, 600)
 8        .AddG(g => g
 9            .FontFamily("Arial")
10            .FontSize(10)
11            .AddPattern(p => p.Id("Pat3a")
12                .Rect(0, 0, 20, 20)
13                .PatternUnits(CoordinateUnits.UserSpaceOnUse)
14                .AddRect(r => r.Rect(0, 0, 10, 10).Fill(Color.LightSlateGray))
15                .AddRect(r => r.Rect(10, 0, 10, 10).Fill(Color.Teal))
16                .AddRect(r => r.Rect(0, 10, 10, 10).Fill(Color.DarkRed))
17                .AddRect(r => r.Rect(10, 10, 10, 10).Fill(Color.Gold))
18            )
19            .AddPattern(p => p.Id("Pat3b")
20                .Href("#Pat3a")
21                .Width(23).Height(23)
22            )
23            .AddPattern(p => p.Id("Pat3c")
24                .Href("#Pat3a")
25                .Width(15).Height(15)
26            )
27            .AddCircle(circle => circle.Cx(90).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3a")))
28            .AddText(t => t.X(55).Y(50)
29                .AddContent("Pattern #Pat3a")
30            )
31            .AddCircle(circle => circle.Cx(240).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3b")))
32            .AddText(t => t.X(205).Y(50)
33                .AddContent("Pattern #Pat3b")
34            )
35            .AddCircle(circle => circle.Cx(390).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3c")))
36            .AddText(t => t.X(355).Y(50)
37                .AddContent("Pattern #Pat3c")
38            )
39        )
40        .Build(document.FirstChild as SVGSVGElement);
41    document.Save(Path.Combine(OutputDir, "patterns.svg"));
42}
Example-CreateSvgPatternsUsingPaintBuilder.cs hosted with ❤ by GitHub

Визуализация файла patterns.svg с несколькими SVG pattern fills.

Как работает Pattern

Элемент <pattern> определяет переиспользуемую плитку, которая повторяется по заполненной фигуре. В этом примере:

Pattern можно повторно использовать для нескольких SVG-элементов, ссылаясь на тот же ID. Меньшие размеры создают более плотное повторение, а большие увеличивают расстояние между элементами.

В примере в SVG-документ добавляются три различных pattern под названиями Pat3a, Pat3b и Pat3c.

Высота и ширина плитки в элементе pattern определяют размер повторяемой единицы в SVG-документе. Этот размер определяет, как pattern будет выглядеть при применении к фигурам. В Pat3b увеличение высоты и ширины плитки увеличивает единицу узора, что приводит к появлению пустых (прозрачных) областей. В Pat3c уменьшение размеров плитки делает узор более плотным, создавая другой визуальный эффект.

Таким образом, настройка высоты и ширины плитки в элементе SVG <pattern> позволяет управлять плотностью и повторением узора в SVG-документе и создавать разнообразные визуальные эффекты.

Создание Linear Gradient Fills

Aspose.SVG Builder API позволяет создавать переиспользуемые SVG linear gradients и применять их к SVG-фигурам. Gradients часто используются для фонов, диаграмм, кнопок и декоративной графики.

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4
 5using (SVGDocument document = new SVGDocument())
 6{
 7    SVGSVGElement svg = new SVGSVGElementBuilder()
 8        .Width(400).Height(200)
 9        .ViewBox(0, 0, 400, 200)
10        .AddDefs(defs => defs
11            .AddLinearGradient(gradient => gradient
12                .Id("gradientFill")
13                .X1(0, LengthType.Percentage).Y1(0, LengthType.Percentage)
14                .X2(100, LengthType.Percentage).Y2(0, LengthType.Percentage)
15                .AddStop(stop => stop
16                    .Offset(0, StopUnitType.Percentage)
17                    .Attribute("stop-color", "gold"))
18                .AddStop(stop => stop
19                    .Offset(100, StopUnitType.Percentage)
20                    .Attribute("stop-color", "teal"))))
21        .AddRect(rect => rect
22            .Rect(20, 20, 360, 160)
23            .Fill(paint => paint.PaintServerId("gradientFill")))
24        .Build(document.FirstChild as SVGSVGElement);
25
26    document.Save(Path.Combine(OutputDir, "linear-gradient-fill.svg"));
27}

Как работает Gradient

Пример создает переиспользуемое SVG-определение <linearGradient> внутри <defs> и применяет его к заливке прямоугольника.

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

ПроблемаПричинаИсправление
Pattern не виденНеверный ID patternУбедитесь, что PaintServerId() совпадает с Id()
Pattern выглядит растянутымСлишком большой размер плиткиНастройте Width() и Height() pattern
Pattern повторяется неправильноНеверное значение PatternUnitsИспользуйте UserSpaceOnUse, если нужны фиксированные плитки
Fill не применяетсяPattern определен вне доступной областиОпределяйте patterns до их применения

FAQ

1. Что такое paint server в SVG?
Paint server – это SVG-ресурс, предоставляющий значения fill или stroke. Частые paint servers: patterns и gradients, на которые ссылаются через url(#id).

2. Можно ли повторно использовать один SVG pattern для нескольких фигур?
Да. Один SVG pattern можно использовать для нескольких элементов, ссылаясь на тот же ID через PaintServerId().

3. Чем отличаются UserSpaceOnUse и ObjectBoundingBox?
UserSpaceOnUse использует фиксированные координаты, а ObjectBoundingBox масштабирует pattern относительно размера целевого элемента.

4. Почему SVG pattern выглядит растянутым?
Обычно это происходит, если плитка pattern слишком большая или система координат не совпадает с целевым элементом.

5. Можно ли применять SVG patterns к тексту?
Да. SVG-текст поддерживает fill и может использовать patterns так же, как фигуры.

6. Поддерживает ли PaintBuilder SVG gradients?
Да. PaintBuilder поддерживает ссылки на paint servers для программной настройки SVG gradients.

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

Rule Builder Как конвертировать файлы SVG