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

使用 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");

在 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");

在 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");

在 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 支持的不同功能。如有任何歧义,请随时在我们的 免费支持论坛 上与我们联系。