在 C# 中将文本转换为 SVG

SVG Text 元素用于定义 SVG 中的文本。 SVG(可缩放矢量图形)是一种网络友好的矢量文件格式。它用于在网页上显示视觉信息。我们可以使用 SVG Text 元素轻松地在 SVG 中编写任何文本。在本文中，我们将学习如何在 C# 中将文本转换为 SVG。

本文将涵盖以下主题：

将文本转换为 SVG 的 C# API
什么是 SVG 文本
将文本转换为 SVG
使用 TSpan 将文本转换为 SVG
带有 TextPath 的 SVG 文本
应用 SVG 文本样式

C# API 将文本转换为 SVG

要将文本转换为 SVG，我们将使用 Aspose.SVG for .NET API。它允许加载、解析、渲染、创建 SVG 文件并将其转换为流行格式，而无需任何软件依赖。

API 的 SVGDocument 类代表 SVG 层次结构的根并保存整个内容。我们在这个类中有 Save() 方法，它允许将 SVG 保存到指定的文件路径。 SVGTextElement 类表示“文本”元素。 SVGTSpanElement 接口对应于 ’tspan’ 元素。 API 提供了代表“textPath”元素的 SVGTextPathElement 类和代表“path”元素的 SVGPathElement。我们可以使用 SetAttribute(string, string) 方法为 SVG 元素设置各种属性/属性。 API 的 AppendChild(Node) 方法将节点的新子节点添加到此 node 的子节点列表的末尾。

请下载 API 的 DLL 或使用 NuGet 安装它。

PM> Install-Package Aspose.SVG

什么是 SVG 文本？

在 SVG 中，文本使用元素呈现。默认情况下，文本以黑色填充呈现，没有轮廓。我们可以定义以下属性：

x：水平设置点的位置。
y：垂直设置点的位置。
填充：定义渲染的文本颜色。
变换：旋转、平移、倾斜和缩放。

使用 C# 将文本转换为 SVG

我们可以按照以下步骤将任何文本添加到 SVG：

首先，创建 SVGDocument 类的实例。
接下来，获取文档的根元素。
然后，创建 SVGTextElement 类对象。
接下来，使用 SetAttribute() 方法设置各种属性。
之后，调用 AppendChild() 方法将其附加到根元素。
最后，使用 Save() 方法保存输出的 SVG 图像。

以下代码示例展示了如何在 C# 中将文本转换为 SVG。

// 此代码示例演示如何将文本添加到 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");

使用 CSharp 将文本转换为 SVG — 使用 C# 将文本转换为 SVG。

请在下面找到 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>

在 C# 中将带有 TSpan 的文本转换为 SVG

SVG 元素在元素中定义了一个子文本。我们可以按照以下步骤将任何带有 tspan 元素的文本添加到 SVG：

首先，创建 SVGDocument 类的实例。
接下来，获取文档的根元素。
然后，创建 SVGTextElement 类对象。
或者，使用 SetAttribute() 方法设置各种属性。
接下来，定义 SVGTSpanElement 对象。
然后，使用 SetAttribute() 方法设置其属性。
现在，调用 AppendChild() 方法将其附加到 SVGTextElement 元素。
重复上述步骤以添加更多 SVGTSpanElement 对象。
之后，调用 AppendChild() 方法将 SVGTextElement 附加到根元素。
最后，使用 Save() 方法保存输出的 SVG 图像。

以下代码示例展示了如何在 C# 中将带有 tspan 的文本转换为 SVG。

// 此代码示例演示如何将带有 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 — 在 C# 中将带有 tspan 的文本转换为 SVG。

请在下面找到 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>

C# 中带有 TextPath 的 SVG 文本

我们还可以沿元素的形状呈现文本，并将文本包含在元素中。它允许使用 href 属性设置对元素的引用。我们可以按照下面给出的步骤来转换带有文本路径的文本：

首先，创建 SVGDocument 类的实例。
接下来，获取文档的根元素。
然后，创建 SVGPathElement 类对象并使用 SetAttribute() 方法设置各种属性。
之后，调用 AppendChild() 方法将其附加到根元素。
接下来，创建 SVGTextElement 类对象。
然后，初始化 SVGTextPathElement 对象并设置文本内容。
接下来，使用 SetAttribute() 方法将 SVGPathElement 分配给它的 href 属性。
然后，调用 AppendChild() 方法将 SVGTextPathElement 附加到 SVGTextElement 元素。
之后，使用 AppendChild() 方法将 SVGTextElement 附加到根元素。
最后，使用 Save() 方法保存输出的 SVG 图像。

以下代码示例展示了如何在 C# 中将带有 textPath 的文本转换为 SVG。

// 此代码示例演示如何将带有 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 文本路径元素
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 文本路径元素
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 — 在 C# 中将带有 textPath 的文本转换为 SVG。

请在下面找到 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>

在 C# 中应用 SVG 文本样式

我们可以按照以下步骤将任何文本添加到 SVG：

首先，创建 SVGDocument 类的实例。
接下来，获取文档的根元素。
然后，创建 SVGTextElement 类对象。
接下来，使用 SetAttribute() 方法设置样式属性。
之后，调用 AppendChild() 方法将其附加到根元素。
最后，使用 Save() 方法保存输出的 SVG 图像。

以下代码示例展示了如何在 C# 中将 CSS 样式应用于 SVG 文本。

// 此代码示例演示如何将文本添加到 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 — 在 C# 中应用 SVG 文本样式。

请在下面找到 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 文本的位置和填充属性；
在 C# 中为 SVG 文本设置样式属性。

除了在 C# 中将文本转换为 SVG 之外，您还可以在文档中了解更多关于 Aspose.SVG for .NET 的信息，并探索 API 支持的不同功能。如有任何歧义，请随时在我们的免费支持论坛上与我们联系。

也可以看看

使用 C# 在 SVG 中填充和描边

C# API 将文本转换为 SVG#

什么是 SVG 文本？#

使用 C# 将文本转换为 SVG#

在 C# 中将带有 TSpan 的文本转换为 SVG#

C# 中带有 TextPath 的 SVG 文本#

在 C# 中应用 SVG 文本样式#

获得免费临时许可证#

结论#

也可以看看#