在 Python 中绘制 SVG 文本

快速解答： 要在 Python 中绘制 SVG 文本，请使用 create_element_ns() 创建 <text> 元素，使用 set_attribute() 设置 x、y、font-family、font-size、fill 和 text-anchor 属性，设置 text_content，将文本追加到 SVG 根元素，然后保存文档。

from aspose.svg import SVGDocument

with SVGDocument() as document:
    text = document.create_element_ns("http://www.w3.org/2000/svg", "text")
    text.set_attribute("x", "20")
    text.set_attribute("y", "40")
    text.text_content = "Hello SVG"
    document.root_element.append_child(text)
    document.save("text.svg")

在本文中，您将学习如何：

• 在 Python 中创建 SVG <text> 元素；
• 使用 x 和 y 坐标定位文本；
• 设置 font-family、font-size、fill 和 text-anchor 属性；
• 使用 <tspan> 元素创建简单的多行文本。

SVG 文本在 SVG 标记中仍然是真实文本。它可以被选择、搜索、本地化、设置样式并在以后继续编辑。如果需要将文本转换为矢量轮廓，以便用于最终图稿或不依赖字体的渲染，请改用 文本矢量化。有关更广泛的 SVG 标记背景，请参阅 SVG Text 指南。

SVG 文本基础

属性或元素	用途
x、y	定位文本基线
font-family	选择请求的字体系列
font-size	以 SVG 单位设置文本大小
fill	设置文本颜色
text-anchor	相对于 x 坐标对齐文本
<tspan>	添加定位片段或简单多行文本

如何在 Python 中绘制 SVG 文本

当生成的 SVG 图形需要标签、说明文字、徽章或图表内文本时，请使用以下工作流：

1. 创建或加载 SVGDocument。
2. 如果要创建新文档，请设置 SVG 根元素的 width、height 和 viewBox。
3. 使用 create_element_ns() 创建 <text> 元素。
4. 使用 set_attribute() 设置 x、y、font-size、font-family、fill 和 text-anchor 等位置和样式属性。
5. 设置 text_content，或追加 <tspan> 子元素。
6. 使用 append_child() 将文本元素追加到 SVG 根元素，并使用 document.save() 保存文档。

创建简单的 SVG 文本标签

下面的示例创建一个带背景矩形和居中文本的小型 SVG 标签。当 x 坐标应表示文本的水平中心时，请使用 text-anchor="middle"。

import os
from aspose.svg import SVGDocument

namespace_uri = "http://www.w3.org/2000/svg"

output_folder = "output/"
output_path = os.path.join(output_folder, "svg-text-label.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("width", "320")
    svg.set_attribute("height", "120")
    svg.set_attribute("viewBox", "0 0 320 120")

    background = document.create_element_ns(namespace_uri, "rect")
    background.set_attribute("x", "24")
    background.set_attribute("y", "24")
    background.set_attribute("width", "272")
    background.set_attribute("height", "72")
    background.set_attribute("rx", "12")
    background.set_attribute("fill", "#f7f7fb")
    background.set_attribute("stroke", "#546e7a")
    background.set_attribute("stroke-width", "3")
    svg.append_child(background)

    label = document.create_element_ns(namespace_uri, "text")
    label.set_attribute("x", "160")
    label.set_attribute("y", "68")
    label.set_attribute("text-anchor", "middle")
    label.set_attribute("font-family", "Arial, sans-serif")
    label.set_attribute("font-size", "26")
    label.set_attribute("font-weight", "700")
    label.set_attribute("fill", "#263238")
    label.text_content = "SVG Text"
    svg.append_child(label)

    document.save(output_path)

文本基线由 y 控制，而不是由字母顶部边缘控制。如果垂直位置需要精确的视觉居中，请调整 y 值，或在自己的布局逻辑中使用字体度量。

下图展示运行示例后的结果：圆角矩形作为简单标签背景，text-anchor="middle" 将 SVG Text 文本围绕中心 x 坐标对齐。

使用 <tspan> 创建多行 SVG 文本

当一个文本块需要多行或独立定位的片段时，请使用 <tspan>。下一个示例创建一个 <text> 元素，并追加两个具有不同 y 位置的 <tspan> 子元素。

import os
from aspose.svg import SVGDocument

namespace_uri = "http://www.w3.org/2000/svg"

output_folder = "output/"
output_path = os.path.join(output_folder, "svg-multiline-text.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("width", "400")
    svg.set_attribute("height", "120")
    svg.set_attribute("viewBox", "0 0 400 120")

    text = document.create_element_ns(namespace_uri, "text")
    text.set_attribute("x", "200")
    text.set_attribute("y", "48")
    text.set_attribute("font-family", "Arial, sans-serif")
    text.set_attribute("font-size", "22")
    text.set_attribute("text-anchor", "middle")
    text.set_attribute("fill", "#263238")

    first_line = document.create_element_ns(namespace_uri, "tspan")
    first_line.set_attribute("x", "200")
    first_line.set_attribute("y", "48")
    first_line.text_content = "Generated SVG Text"
    text.append_child(first_line)

    second_line = document.create_element_ns(namespace_uri, "tspan")
    second_line.set_attribute("x", "200")
    second_line.set_attribute("y", "84")
    second_line.set_attribute("fill", "#2e86de")
    second_line.text_content = "with Aspose.SVG for Python via .NET"
    text.append_child(second_line)

    svg.append_child(text)
    document.save(output_path)

两行文本属于同一个 <text> 元素，但每个 <tspan> 都有自己的位置，并且可以覆盖 fill 等样式属性。

下图展示两行 SVG 文本输出。第一个 <tspan> 绘制深色标题，第二个 <tspan> 使用单独的 y 位置和蓝色 fill 值绘制副标题。

常见错误和修复

问题	修复
文本不可见	设置 fill，检查 x 和 y，并确保文本位于 viewBox 内
文本位置过高或过低	记住 y 定位的是文本基线，而不是顶部边缘
居中对齐不起作用	设置 text-anchor="middle"，并将需要的中心位置作为 x 值
多行文本重叠	为每个 <tspan> 设置单独的 y 值，或谨慎使用 dy 间距
文本在另一台机器上渲染不同	使用常见字体，或在需要字体无关输出时将最终图稿转换为矢量路径

常见问题

如何在 Python 中向 SVG 添加文本？

使用 create_element_ns() 创建 <text> 元素，设置 x、y、font-family、font-size 和 fill 属性，设置 text_content，将其追加到 SVG 根元素，然后保存 SVG。

如何居中 SVG 文本？

设置 text-anchor="middle"，并将 x 设置为所需的水平中心。再调整 y 来控制基线位置。

可以创建多行 SVG 文本吗？

可以。使用一个 <text> 元素和多个 <tspan> 子元素。为每个 <tspan> 设置自己的 x 和 y 值，或使用受控的 dy 间距。

应该绘制 SVG 文本还是矢量化文本？

当文本需要保持可编辑、可搜索或可本地化时，请绘制普通 SVG 文本。只有在最终图稿必须保留精确字形轮廓，并且不能依赖已安装字体时，才矢量化文本。

相关文章

• Python 中的 SVG viewBox 和坐标 解释文本坐标如何映射到可见 SVG 区域。
• 在 Python 中绘制 SVG 形状 展示如何将文本与生成的形状组合。
• 在 Python 中创建 SVG 图标 使用与文本相邻的绘图模式创建紧凑生成图形。
• 在 Python 中将文本转换为矢量 解释如何将 SVG 文本转换为矢量轮廓，以获得最终的字体无关输出。