Заливка и обводка в SVG с использованием C#

SVG (Scalable Vector Graphics) — это формат векторных файлов на основе XML, удобный для работы в Интернете. Он используется для отображения визуальной информации на веб-странице. Изображения SVG масштабируются без изменения качества изображения. В этой статье мы узнаем, как работать с заливкой и обводкой в SVG с помощью C#.

В этой статье должны быть раскрыты следующие темы:

1. API C# для заливки и обводки в SVG
2. Что такое SVG-заливка
3. Что такое SVG Stroke
4. Штрихи и заливки в SVG
5. Заполнить и обвести круг в SVG
6. Заполнить и обвести контур в SVG
7. Применить заливку и обводку с помощью стиля

С# API для заполнения и обводки в SVG

Для работы с атрибутами заливки и обводки SVG в C# мы будем использовать API Aspose.SVG для .NET. Он позволяет загружать, анализировать, отображать, создавать и преобразовывать файлы SVG в популярные форматы без каких-либо программных зависимостей.

Класс SVGDocument API представляет собой корень иерархии SVG и содержит все содержимое. Метод Save() этого класса позволяет сохранить SVG по указанному пути к файлу. Метод QuerySelector() возвращает первый элемент в документе, соответствующий селектору. API поддерживает работу с популярными формами, такими как прямоугольники, круги, эллипсы, линии, полилинии и т. д. API предоставляет отдельные классы для представления этих поддерживаемых форм, например SVGCircleElement для круга, SVGPolygonElement для многоугольника и т. д.

Пожалуйста, либо загрузите DLL API, либо установите его с помощью NuGet.

PM> Install-Package Aspose.SVG

Что такое SVG-заполнение?

Свойство fill — это один из основных атрибутов представления SVG, используемый для установки цвета фигуры внутри ее контура.

Мы можем определить следующие атрибуты заливки:

• fill: устанавливает цвет для заливки. Укажите none или Transparent, если заливки нет.
• fill-opacity: устанавливает значение непрозрачности от 0 до 1.
• fill-rule: определяет, как определяется внутренняя область фигуры, например, ненулевая, даженечетная.

Что такое SVG Stroke?

Свойство штриха определяет контур или границу фигур SVG. Атрибут представления штриха задает цвет контура фигуры.

Мы можем установить следующие атрибуты штриха:

• штрих: устанавливает значение цвета.
• stroke-dasharray: определяет типы пунктирных линий.
• штрих-тиреофсет
• stroke-linecap: управляет формой концов линий, таких как стык, квадрат и круг.
• stroke-linejoin: указывает, как две линии соединяются, например, под углом, скосом и закруглением.
• stroke-miterlimit: должно быть больше или равно 1, если используется.
• штрих-непрозрачность: устанавливает значение непрозрачности от 0 до 1.
• ширина обводки: устанавливает ширину.

Заливки и обводки в SVG

И заливка, и обводка используются для добавления цвета, градиентов или узоров к графике в SVG. Заливка закрашивает внутреннюю часть элемента SVG, тогда как обводка закрашивает его контур. Мы можем указать как заливку, так и обводку в атрибуте стиля или использовать их как атрибуты представления.

Мы можем установить заливки SVG и штрихи SVG в атрибуте стиля, как показано ниже:

style="stroke:#00ff00; stroke-width:2; fill:#ff0000"

Мы также можем использовать те же свойства стиля в атрибутах презентации, как показано ниже:

stroke="green" stroke-width="2" fill="#ff0000"

Для указания цвета SVG мы можем использовать имена цветов, такие как красный, синий и т. д. Мы также можем использовать значения RGB или значения HEX для цветов.

Заполнить и обвести круг в C#

Мы можем установить свойства заливки SVG и обводки SVG для круга, выполнив следующие шаги:

1. Во-первых, загрузите существующий SVG, используя класс SVGDocument.
2. Затем получите корневой элемент документа.
3. Затем найдите все элементы круга с помощью метода QuerySelectorAll().
4. После этого установите атрибуты заливки для выбранного SVGCircleElement.
5. При необходимости установите атрибуты обводки для выбранного элемента SVGCircleElement.
6. Наконец, сохраните выходное изображение SVG, используя метод Save().

В следующем примере кода показано, как задать заливку и обводку для кругового элемента SVG в C#.

// В этом примере кода показано, как задать атрибуты заливки и обводки для кругового элемента SVG в C#.
// Загрузите существующее изображение SVG
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// Получить корневой элемент SVG документа
var svgElement = document.RootElement;

// Найти все элементы круга в элементе g
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// Получить первый элемент круга
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Установить атрибуты заливки
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Установить атрибуты обводки
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// Сохраните SVG
document.Save(@"C:\Files\SVG\Fill-Circle.svg");

Ниже вы найдете содержимое изображения Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="none"/>
    </g>
</svg>

Вот содержимое изображения Fill-Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="#0F0" fill-opacity="0.3" stroke="#508484" stroke-width="10"/>
    </g>
</svg>

Заполнить и обвести контур в C#

Мы можем установить свойства заливки SVG и обводки SVG для элемента пути в SVG, выполнив шаги, указанные ниже:

1. Во-первых, загрузите существующий SVG, используя класс SVGDocument.
2. Затем получите корневой элемент документа.
3. Затем получите элемент пути с помощью метода QuerySelector().
4. После этого установите атрибуты заливки для выбранного элемента SVGPathElement.
5. При необходимости установите атрибуты штриха для выбранного SVGPathElement.
6. Наконец, сохраните выходное изображение SVG, используя метод Save().

В следующем примере кода показано, как задать заливку и обводку для элемента пути SVG в C#.

// В этом примере кода показано, как задать атрибуты заливки и обводки для элемента пути SVG в C#.
// Загрузите существующее изображение SVG
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// Получить корневой элемент SVG документа
var svgElement = document.RootElement;

// Получить первый элемент пути
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Установить атрибуты заливки
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Установить атрибуты обводки
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// Сохраните SVG
document.Save(@"C:\Files\SVG\Fill-Path.svg");

Ниже вы найдете содержимое изображения Sample-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    </g>
</svg>

Ниже вы найдете содержимое изображения Fill-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="#508484" stroke-width="10" fill="orange" fill-opacity="0.6"/>
    </g>
</svg>

Применение заливки и обводки с использованием стиля в C#

Мы также можем применить свойства заливки SVG и обводки SVG, используя атрибут стиля CSS, выполнив шаги, указанные ниже:

1. Во-первых, создайте экземпляр класса SVGDocument.
2. Затем получите корневой элемент документа.
3. Затем создайте элемент круга с помощью метода CreateElementNS().
4. Затем установите основные свойства окружности, такие как Cx, Cy и R.
5. Затем примените атрибут стиля с помощью метода SetAttribute().
6. После этого добавьте дочерний элемент с помощью метода AppendChild().
7. Наконец, сохраните выходное изображение SVG, используя метод Save().

В следующем примере кода показано, как применить заливку и обводку с помощью стиля CSS в C#.

// В этом примере кода показано, как применить атрибуты заливки и обводки с помощью стиля CSS в C#.
// Создайте новый SVG
using (var document = new SVGDocument())
{
    // Получить корневой элемент SVG документа
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Добавить круг
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Установить атрибут стиля
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Добавить круг к корневому элементу
    svgElement.AppendChild(circle);
    
    // Сохраните SVG
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}

<svg xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="50" cy="50" r="40" style="fill: blue; stroke: rgb(251, 103, 150); stroke-width: 5;"/>
	</g>
</svg>

Получить бесплатную временную лицензию

Вы можете получить бесплатную временную лицензию, чтобы попробовать Aspose.SVG для .NET без ограничений пробной версии.

Вывод

В этой статье мы узнали, как:

• создайте новое изображение SVG;
• загрузить существующее изображение SVG;
• редактировать SVG-изображение;
• установить атрибуты заливки и обводки для фигур SVG;
• установить атрибуты стиля для фигур в C#.

Кроме того, вы можете узнать больше об Aspose.SVG для .NET в документации и изучить различные функции, поддерживаемые API. В случае возникновения каких-либо неясностей, пожалуйста, свяжитесь с нами на нашем форуме.

Смотрите также

• Изменить цвет или фон SVG программно в C#