Перетворення тексту на SVG у C#

Елемент SVG Text використовується для визначення тексту у SVG. SVG (Scalable Vector Graphics) — зручний векторний формат файлів. Він використовується для відображення візуальної інформації на веб-сторінці. Ми можемо легко написати будь-який текст у SVG за допомогою елемента SVG Text. У цій статті ми дізнаємося, як конвертувати текст у SVG у C#.

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

  1. API C# для перетворення тексту у SVG
  2. Що таке текст SVG
  3. Перетворити текст у SVG
  4. Перетворення тексту за допомогою TSpan на SVG
  5. SVG-текст із TextPath
  6. Застосувати стилі тексту SVG

C# API для перетворення тексту у SVG

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

Клас SVGDocument API представляє корінь ієрархії SVG і містить увесь вміст. У цьому класі є метод Save(), який дозволяє зберегти SVG у вказаний шлях до файлу. Клас SVGTextElement представляє елемент “text”. Інтерфейс SVGTSpanElement відповідає елементу tspan. API надає клас SVGTextPathElement, що представляє елемент textPath, і SVGPathElement для елемента path. Ми можемо встановити різні властивості/атрибути для елементів SVG за допомогою методу SetAttribute(string, string). Метод AppendChild(Node) API додає новий дочірній елемент вузла в кінець списку дочірніх елементів цього вузла.

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

PM> Install-Package Aspose.SVG

Що таке текст SVG?

У SVG текст відображається за допомогою елемента . За замовчуванням текст відображається з чорною заливкою та без контуру. Ми можемо визначити такі атрибути:

  • x: встановлює положення точки по горизонталі.
  • y: встановлює положення точки по вертикалі.
  • заливка: визначає колір відтвореного тексту.
  • transform : поворот, переміщення, нахил і масштаб.

Перетворення тексту на SVG за допомогою C#

Ми можемо додати будь-який текст до SVG, виконавши наведені нижче кроки:

  1. По-перше, створіть екземпляр класу SVGDocument.
  2. Далі отримайте кореневий елемент документа.
  3. Потім створіть об’єкт класу SVGTextElement.
  4. Далі встановіть різні атрибути за допомогою методу SetAttribute().
  5. Після цього викличте метод AppendChild(), щоб додати його до кореневого елемента.
  6. Нарешті, збережіть вихідне зображення SVG за допомогою методу Save().

У наведеному нижче прикладі коду показано, як перетворити текст у SVG у C#.

// Цей приклад коду демонструє, як додати текст до SVG.
var document = new SVGDocument();

// Отримати кореневий елемент svg документа
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// Визначте текстовий елемент SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Визначте текст для показу
text.TextContent = "The is a simple SVG text!";

// Встановіть різні атрибути
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Додайте текст до кореня
svgElement.AppendChild(text);

// Зберегти як SVG
document.Save(@"C:\Files\simple-text.svg");
Convert-Text-to-SVG-using-CSharp

Перетворення тексту на SVG за допомогою C#.

Нижче перегляньте вміст зображення simple-text.svg.

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30">The is a simple SVG text!</text>
</svg>

Перетворення тексту за допомогою TSpan на SVG у C#

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

  1. По-перше, створіть екземпляр класу SVGDocument.
  2. Далі отримайте кореневий елемент документа.
  3. Потім створіть об’єкт класу SVGTextElement.
  4. За бажанням можна встановити різні атрибути за допомогою методу SetAttribute().
  5. Далі визначте об’єкт SVGTSpanElement.
  6. Потім встановіть його атрибути за допомогою методу SetAttribute().
  7. Тепер викличте метод AppendChild(), щоб додати його до елемента SVGTextElement.
  8. Повторіть описані вище дії, щоб додати більше об’єктів SVGTSpanElement.
  9. Після цього викличте метод AppendChild(), щоб додати SVGTextElement до кореневого елемента.
  10. Нарешті, збережіть вихідне зображення SVG за допомогою методу Save().

У наведеному нижче прикладі коду показано, як перетворити текст за допомогою tspan на SVG у C#.

// Цей приклад коду демонструє, як додати текст за допомогою tspan до SVG.
var document = new SVGDocument();

// Отримати кореневий елемент svg документа
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// Текстовий елемент SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");
text.SetAttribute("style", "font-family:arial");
text.SetAttribute("x", "20");
text.SetAttribute("y", "60");

// Елемент SVG TSpan
var tspan1 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan1.TextContent = "ASPOSE";
tspan1.SetAttribute("style", "font-weight:bold; font-size:55px");
tspan1.SetAttribute("x", "20");
tspan1.SetAttribute("y", "60");

// Додати до тексту SVG
text.AppendChild(tspan1);

// Ще один елемент TSpan
var tspan2 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan2.TextContent = "Your File Format APIs";
tspan2.SetAttribute("style", "font-size:20px; fill:grey");
tspan2.SetAttribute("x", "37");
tspan2.SetAttribute("y", "90");

// Додати до тексту SVG
text.AppendChild(tspan2);

// Додайте текст SVG до кореня
svgElement.AppendChild(text);

// Збережіть SVG
document.Save(@"C:\Files\svg-tSpan.svg");
SVG-Text-with-tspan-in-CSharp

Перетворення тексту за допомогою tspan на SVG у C#.

Нижче наведено вміст зображення svg-tspan.svg.

<svg xmlns="http://www.w3.org/2000/svg">
    <text style="font-family: arial;" x="20" y="60">
        <tspan style="font-weight: bold; font-size: 55px;" x="20" y="60">ASPOSE</tspan>
        <tspan style="font-size: 20px; fill: grey;" x="37" y="90">Your File Format APIs</tspan>
    </text>
</svg>

Текст SVG із TextPath у C#

Ми також можемо відобразити текст уздовж форми елемента і вкласти текст в елемент . Він дозволяє встановлювати посилання на елемент за допомогою атрибута href. Ми можемо конвертувати текст із текстовими шляхами, виконавши наведені нижче кроки:

  1. По-перше, створіть екземпляр класу SVGDocument.
  2. Далі отримайте кореневий елемент документа.
  3. Потім створіть об’єкт класу SVGPathElement і встановіть різні атрибути за допомогою методу SetAttribute().
  4. Після цього викличте метод AppendChild(), щоб додати його до кореневого елемента.
  5. Далі створіть об’єкт класу SVGTextElement.
  6. Потім ініціалізуйте об’єкт SVGTextPathElement і встановіть текстовий вміст.
  7. Потім призначте SVGPathElement його атрибуту href за допомогою методу SetAttribute().
  8. Потім викличте метод AppendChild(), щоб додати SVGTextPathElement до елемента SVGTextElement.
  9. Після цього додайте SVGTextElement до кореневого елемента за допомогою методу AppendChild().
  10. Нарешті, збережіть вихідне зображення SVG за допомогою методу Save().

У наведеному нижче прикладі коду показано, як перетворити текст за допомогою textPath у SVG у C#.

// Цей приклад коду демонструє, як додати текст за допомогою textPath до SVG.
var document = new SVGDocument();

// Отримати кореневий елемент svg документа
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// Елемент шляху SVG
var path1 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path1.SetAttribute("id", "path_1");
path1.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100");
path1.SetAttribute("fill", "transparent");

// Додайте Шлях SVG до кореневого елемента
svgElement.AppendChild(path1);

// Another Елемент шляху SVG
var path2 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path2.SetAttribute("id", "path_2");
path2.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100");
path2.SetAttribute("transform", "translate(0,75)");
path2.SetAttribute("fill", "transparent");

// Додайте Шлях SVG до кореневого елемента
svgElement.AppendChild(path2);

// Текстовий елемент SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Створіть елемент SVG Text Path
var textPath1 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath1.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath1.SetAttribute("href", "#path_1");

// Додати шлях до тексту SVG до тексту SVG
text.AppendChild(textPath1);

// Ще один елемент SVG Text Path
var textPath2 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath2.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath2.SetAttribute("href", "#path_2");

// Додати шлях до тексту SVG до тексту SVG
text.AppendChild(textPath2);

// Додайте текст SVG до кореня
svgElement.AppendChild(text);

// Збережіть SVG
document.Save(@"C:\Files\svg-textPath.svg");
SVG-Text-with-textPath-in-CSharp

Перетворення тексту за допомогою textPath на SVG у C#.

Нижче можна знайти вміст зображення svg-textPath.svg.

<svg xmlns="http://www.w3.org/2000/svg">
    <path id="path_1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" fill="transparent"/>
    <path id="path_2" d="M 50 100 Q 25 10 180 100 T 350 100" transform="translate(0,75)" fill="transparent"/>
    <text>
        <textPath href="#path_1">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
        <textPath href="#path_2">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
    </text>
</svg>

Застосувати стиль тексту SVG у C#

Ми можемо додати будь-який текст до SVG, виконавши наведені нижче кроки:

  1. По-перше, створіть екземпляр класу SVGDocument.
  2. Далі отримайте кореневий елемент документа.
  3. Потім створіть об’єкт класу SVGTextElement.
  4. Далі встановіть атрибут style за допомогою методу SetAttribute().
  5. Після цього викличте метод AppendChild(), щоб додати його до кореневого елемента.
  6. Нарешті, збережіть вихідне зображення SVG за допомогою методу Save().

У наведеному нижче прикладі коду показано, як застосувати стилі CSS до тексту SVG у C#.

// Цей приклад коду демонструє, як додати текст до SVG і застосувати атрибути стилю CSS.
var document = new SVGDocument();

// Отримати кореневий елемент svg документа
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// Визначте текстовий елемент SVG
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// Визначте текст для показу
text.TextContent = "The is a simple SVG text!";

// Встановіть різні атрибути
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// Застосувати стиль
text.SetAttribute("style", "font-weight:bold; font-style: italic; text-decoration: line-through; text-transform: capitalize;");

// Додайте текст до кореня
svgElement.AppendChild(text);

// Зберегти як SVG
document.Save(@"C:\Files\text-style.svg");
Apply-SVG-Text-Style-in-CSharp

Застосуйте стиль тексту SVG у C#.

Нижче наведено вміст зображення text-style.svg.

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30" style="font-weight: bold; font-style: italic; text-decoration-line: line-through; text-transform: capitalize;">The is a simple SVG text!</text>
</svg>

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

Ви можете отримати безкоштовну тимчасову ліцензію, щоб спробувати Aspose.SVG for .NET без оціночних обмежень.

Висновок

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

  • створити нове зображення SVG;
  • використовувати текстові елементи SVG;
  • відобразити текст SVG у шляху;
  • встановити позицію та атрибути заливки для тексту SVG;
  • встановити атрибути стилю для тексту SVG у C#.

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

Дивись також