Преобразование текста в 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, мы будем использовать API Aspose.SVG для .NET. Он позволяет загружать, анализировать, отображать, создавать и преобразовывать файлы SVG в популярные форматы без каких-либо программных зависимостей.

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

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

PM> Install-Package Aspose.SVG

Что такое SVG-текст?

В SVG текст отображается с помощью элемента . По умолчанию текст отображается с черной заливкой и без контура. Мы можем определить следующие атрибуты:

  • x: устанавливает положение точки по горизонтали.
  • y: устанавливает положение точки по вертикали.
  • fill: определяет цвет отображаемого текста.
  • 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");
Преобразование текста в SVG с помощью 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-текст с tspan-в-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-текст с текстовым путем в 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. Затем установите атрибут стиля с помощью метода 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");
Применить-SVG-текстовый стиль-в-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 для .NET без ограничений пробной версии.

Вывод

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

  • создайте новое изображение SVG;
  • использовать текстовые элементы SVG;
  • визуализировать текст SVG в путь;
  • установить атрибуты позиции и заполнения для текста SVG;
  • установить атрибуты стиля для текста SVG в C#.

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

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