Колір заливки SVG і колір обведення SVG у C#

SVG(масштабована векторна графіка) — це зручний векторний формат файлів на основі XML. Він дозволяє розробникам і дизайнерам створювати векторну графіку за допомогою точок, ліній, шляхів і форм. Ви можете використовувати його для розробки логотипів, піктограм, простої графіки та анімації. Будь-який текстовий редактор може створювати та редагувати зображення SVG, оскільки вони не залежать від роздільної здатності. Дизайн є одним із найважливіших аспектів створення SVG, але колір також має не менш важливе значення. Кольори можна застосовувати до фігур, ліній, контурів і текстів SVG. Можна розфарбовувати, текстурувати, затіняти або створювати графіку SVG із частково прозорих шарів, що перекриваються. У цій статті ми навчимося працювати з SVG Fill Color і SVG Stroke Color у C#.

У цій статті будуть розглянуті такі теми:

API SVG C# для кольору заливки та обведення SVG
Що таке заливка SVG
Що таке SVG Stroke
Як використовувати заливку SVG і обведення SVG?
Як використовувати колір заливки SVG і колір обведення SVG
Круг заливки та обведення у SVG
Шлях заливки та обведення у SVG
Застосувати заливку та обведення за допомогою стилю

SVG C# API для кольору заливки та обведення SVG

Для роботи з SVG Fill Color і SVG Stroke Color у C# ми будемо використовувати Aspose.SVG for .NET API. Він дозволяє завантажувати, аналізувати, відтворювати, створювати та перетворювати файли SVG у популярні формати без будь-яких програмних залежностей.

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

Завантажте DLL API або встановіть його за допомогою NuGet.

PM> Install-Package Aspose.SVG

Що таке заливка SVG?

Властивість заливки є одним із основних атрибутів презентації SVG, який використовується для встановлення кольору фігури всередині її контуру.

Ми можемо визначити такі атрибути заповнення:

заливка: встановлює колір заливки. Укажіть «немає» або «прозоро», якщо немає заповнення.
fill-opacity: встановлює значення непрозорості від 0 до 1.
Правило заповнення: визначає, як визначається внутрішня область фігури, наприклад ненульова, парна.

Що таке SVG Stroke?

Властивість stroke визначає контур або межу фігур SVG. Атрибут представлення обведення встановлює колір контуру фігури.

Ми можемо встановити такі атрибути обведення:

обведення: встановлює значення кольору.
stroke-dasharray: визначає типи пунктирних ліній.
stroke-dashoffset
stroke-linecap: керує формою кінців ліній, таких як стик, квадрат і кругла.
stroke-linejoin: Визначає, як з’єднуються дві лінії, як-от скошена, скошена та кругла.
stroke-miterlimit: має бути більше або дорівнювати 1, якщо використовується.
stroke-opacity: встановлює значення непрозорості від 0 до 1.
stroke-width: встановлює ширину.

Як використовувати заливку SVG і обведення SVG?

І заливка, і обведення використовуються для додавання кольору, градієнтів або візерунків до графіки у SVG. Заливка малює внутрішню частину елемента SVG, тоді як обведення малює його контур. Ми можемо вказати як заливку, так і обведення в атрибуті style або використовувати їх як атрибути презентації.

Ми можемо встановити заливки SVG і обведення SVG в атрибуті style, як показано нижче:

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

Ми також можемо використовувати ті самі властивості стилю в атрибутах презентації, як показано нижче:

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

Як використовувати колір заливки SVG і колір обведення SVG

Специфікація кольорів передбачає низку правил, таких як:

За замовчуванням використовується чорний колір, якщо атрибут заливки не вказано.
Фігуру не буде заповнено жодним кольором, якщо атрибут fill має значення none або transparent.
Обведення не буде, якщо атрибут stroke не вказано, навіть якщо вказано атрибут stroke-width.

Для визначення кольору SVG ми можемо використовувати такі назви кольорів, як червоний, синій тощо. Ми також можемо використовувати значення RGB або HEX для кольорів. Нижче наведено декілька прикладів різних способів встановлення кольорів заливки та обведення:

Назви кольорів SVG

Специфікація SVG визначає 147 назв кольорів. Ми можемо встановити будь-який колір, вказавши його назву, як показано нижче:

stroke="Green"

fill="Red"

Коди кольорів HEX

Ми також можемо вказати шість (6) код кольору, представлений у формі #RRGGBB. Існують двозначні шістнадцяткові пари для трьох кольорів (червоного, зеленого та синього) зі значеннями в діапазоні від 00 до FF. Ми можемо встановити зелений і червоний кольори за допомогою шістнадцяткового значення, як показано нижче:

stroke="#00FF00"

fill="#FF0000"

Кольорові коди RGB (червоний, синій, зелений).

Ми можемо вказати значення кольорів RGB у діапазоні від 0 до 255. Ми можемо встановити значення кольорів RGB зеленого та червоного, як показано нижче:

stroke="rgb(0,255,0)"

fill="rgb(255,0,0)"

Кольорові коди RGBA (червоний, синій, зелений, альфа).

Значення кольорів RGBA — це значення кольорів RGB, покращені альфа-каналом для визначення їх непрозорості. Це число від 0,0 до 1,0, яке визначає прозорість. Ми можемо отримати зелений і червоний кольори RGB, як показано нижче:

stroke="rgba(0,255,0,1.0)"

fill="rgba(255,0,0,1.0)"

Кольорові коди HSL

HSL означає Hue, Saturation і Lightness. Кожен колір у HSL має кут на колірному колі RGB, а також значення інтенсивності та насиченості у відсотках. Ми можемо отримати коди HSL для зеленого та червоного кольорів, як показано нижче:

stroke="hsl(120, 100%, 50%)"

fill="hsl(0, 100%, 50%)"

Кольорові коди HSLA (відтінок, насиченість, освітленість, альфа).

Додавання значення альфа-каналу до значення кольору HSL дозволяє вказати непрозорість кольору. Ми можемо отримати коди HSLA для зеленого та червоного кольорів, як показано нижче:

 stroke="hsla(120, 100%, 50%, 1.0)"

fill="hsla(0, 100%, 50%, 1.0)"

Коло заливки та обведення в C#

Ми можемо встановити властивості заливки SVG і обведення SVG для кола, виконавши наведені нижче кроки:

По-перше, завантажте існуючий SVG за допомогою класу SVGDocument.
Далі отримайте кореневий елемент документа.
Потім знайдіть усі елементи кола за допомогою методу QuerySelectorAll().
Після цього встановіть атрибути заливки для вибраного SVGCircleElement.
За бажанням установіть атрибути обведення для вибраного SVGCircleElement.
Нарешті, збережіть вихідне зображення 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");

Fill-and-Stroke-Circle-in-CSharp — Установіть заливку та обведення для елемента кола в C#.

Нижче перегляньте вміст зображення 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, виконавши наведені нижче кроки:

По-перше, завантажте існуючий SVG за допомогою класу SVGDocument.
Далі отримайте кореневий елемент документа.
Потім отримайте елемент шляху за допомогою методу QuerySelector().
Після цього встановіть атрибути заповнення для вибраного SVGPathElement.
За бажанням установіть атрибути обведення для вибраного SVGPathElement.
Нарешті, збережіть вихідне зображення 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");

Заливка та обведення контуру в CSharp — Установіть заливку та обведення для елемента шляху в C#.

Нижче наведено вміст зображення 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>

Застосування заливки SVG і обведення SVG за допомогою стилю в C#

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

По-перше, створіть екземпляр класу SVGDocument.
Далі отримайте кореневий елемент документа.
Потім створіть елемент кола за допомогою методу CreateElementNS().
Далі встановіть основні властивості кола, такі як Cx, Cy та R.
Потім застосуйте атрибут style за допомогою методу SetAttribute().
Після цього додайте дочірній елемент за допомогою методу AppendChild().
Нарешті, збережіть вихідне зображення SVG за допомогою методу Save().

У наведеному нижче прикладі коду показано, як застосувати заливку та обведення SVG за допомогою стилю 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");
}

Apply-Fill-and-Stroke-using-Style-in-CSharp — Застосуйте заливку та обведення за допомогою стилю CSS

<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 for .NET без оціночних обмежень.

Висновок

У цій статті ми дізналися, як:

створити нове зображення SVG;
завантажити наявне зображення SVG;
редагувати зображення SVG;
встановити атрибути заливки та обведення для фігур SVG;
встановити атрибути стилю для фігур у C#.

Крім того, ви можете дізнатися більше про Aspose.SVG for .NET у документації та дослідити різні функції, які підтримує API. У разі будь-якої неясності зв’яжіться з нами на нашому форумі.

Дивись також

Програмно змініть колір або фон SVG у C#

SVG C# API для кольору заливки та обведення SVG#

Що таке заливка SVG?#

Що таке SVG Stroke?#

Як використовувати заливку SVG і обведення SVG?#

Як використовувати колір заливки SVG і колір обведення SVG#

Коло заливки та обведення в C##

Шлях заливки та обведення в C##

Застосування заливки SVG і обведення SVG за допомогою стилю в C##

Отримайте безкоштовну тимчасову ліцензію#

Висновок#

Дивись також#