在 Python 中绘制 SVG 形状

快速解答: 要在 Python 中绘制 SVG 形状,请创建 SVGDocument,设置 SVG 根元素的尺寸和 viewBox,使用 create_element_ns() 创建形状元素,使用 set_attribute() 设置几何和样式属性,将每个形状追加到根元素,然后保存 SVG。

1from aspose.svg import SVGDocument
2
3with SVGDocument() as document:
4    svg = document.root_element
5    rect = document.create_element_ns("http://www.w3.org/2000/svg", "rect")
6    rect.set_attribute("width", "80")
7    rect.set_attribute("height", "50")
8    svg.append_child(rect)
9    document.save("shapes.svg")

在本文中,您将学习如何:

SVG 形状是生成图表、图标、统计图、徽章和插图时最简单的构件。每种形状都有自己的几何属性:矩形使用 x、y、width 和 height;圆使用 cx、cy 和 r;多边形使用 points 列表。有关更广泛的 SVG 标记背景,请参阅 SVG Shapes 指南。

SVG 形状基础

元素主要几何属性适用场景
<rect>x、y、width、height、rx绘制框、面板、卡片和圆角矩形
<circle>cx、cy、r绘制点、徽章、标记和圆形图标
<ellipse>cx、cy、rx、ry绘制椭圆或非圆形标记
<line>x1、y1、x2、y2绘制一个直线段
<polyline>points绘制连接的开放线段
<polygon>points绘制三角形、星形等闭合形状

如何在 Python 中绘制 SVG 形状

当您需要从形状基元生成 SVG 绘图时,请使用以下工作流:

  1. 创建 SVGDocument。
  2. 设置 SVG 根元素的 width、height 和 viewBox 属性。
  3. 使用 document.create_element_ns(namespace_uri, qualified_name) 创建每个形状。
  4. 使用 set_attribute() 设置几何和样式属性。
  5. 使用 append_child() 将每个可见形状追加到 SVG 根元素。
  6. 使用 document.save(output_path) 保存文档。

绘制矩形、圆和椭圆

当图稿可以用简单的中心点、尺寸和半径值描述时,请使用矩形、圆和椭圆。下面的示例创建一个小场景:一个全尺寸矩形作为背景,一个圆作为主体对象,一个椭圆作为柔和阴影。

 1import os
 2from aspose.svg import SVGDocument
 3
 4namespace_uri = "http://www.w3.org/2000/svg"
 5
 6output_folder = "output/"
 7output_path = os.path.join(output_folder, "svg-basic-shapes.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument() as document:
11    svg = document.root_element
12    svg.set_attribute("width", "300")
13    svg.set_attribute("height", "200")
14    svg.set_attribute("viewBox", "0 0 300 200")
15
16    rectangle = document.create_element_ns(namespace_uri, "rect")
17    rectangle.set_attribute("width", "300")
18    rectangle.set_attribute("height", "200")
19    rectangle.set_attribute("fill", "#e6eafa")
20    svg.append_child(rectangle)
21
22    circle = document.create_element_ns(namespace_uri, "circle")
23    circle.set_attribute("cx", "150")
24    circle.set_attribute("cy", "75")
25    circle.set_attribute("r", "50")
26    circle.set_attribute("fill", "#2e86de")
27    circle.set_attribute("stroke", "#0d47a1")
28    circle.set_attribute("stroke-width", "8")
29    svg.append_child(circle)
30
31    ellipse = document.create_element_ns(namespace_uri, "ellipse")
32    ellipse.set_attribute("cx", "150")
33    ellipse.set_attribute("cy", "155")
34    ellipse.set_attribute("rx", "70")
35    ellipse.set_attribute("ry", "20")
36    ellipse.set_attribute("fill", "#90a4ae")
37    ellipse.set_attribute("opacity", "0.35")
38    svg.append_child(ellipse)
39
40    document.save(output_path)

保存后的 SVG 只包含生成的 DOM 元素。当应用程序计算形状位置,然后写出最终 SVG 文件时,这种方式很有用。

下图展示三个形状元素如何协同工作:<rect> 覆盖整个 viewBox,形成浅色背景;<circle> 创建蓝色主体;下方的半透明 <ellipse> 看起来像阴影。

使用 Python 创建的 SVG 场景,包含浅色矩形背景、蓝色圆形和半透明椭圆阴影

绘制直线、折线和多边形

使用 line 绘制一个线段,使用 polyline 绘制开放的连接线,使用 polygon 绘制闭合形状。points 属性是由空格分隔的坐标对列表。

 1import os
 2from aspose.svg import SVGDocument
 3
 4namespace_uri = "http://www.w3.org/2000/svg"
 5
 6output_folder = "output/"
 7output_path = os.path.join(output_folder, "svg-lines-polygons.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument() as document:
11    svg = document.root_element
12    svg.set_attribute("width", "520")
13    svg.set_attribute("height", "300")
14    svg.set_attribute("viewBox", "0 0 520 300")
15
16    line = document.create_element_ns(namespace_uri, "line")
17    line.set_attribute("x1", "30")
18    line.set_attribute("y1", "20")
19    line.set_attribute("x2", "130")
20    line.set_attribute("y2", "290")
21    line.set_attribute("stroke", "#4387be")
22    line.set_attribute("stroke-width", "10")
23    svg.append_child(line)
24
25    polyline = document.create_element_ns(namespace_uri, "polyline")
26    polyline.set_attribute("points", "100,100 160,50 220,100 280,50 340,100 400,50")
27    polyline.set_attribute("fill", "none")
28    polyline.set_attribute("stroke", "#fb6796")
29    polyline.set_attribute("stroke-width", "5")
30    svg.append_child(polyline)
31
32    polygon = document.create_element_ns(namespace_uri, "polygon")
33    polygon.set_attribute("points", "360,290 430,20 500,290")
34    polygon.set_attribute("fill", "#86a9b9")
35    polygon.set_attribute("stroke", "#fb6796")
36    polygon.set_attribute("stroke-width", "5")
37    svg.append_child(polygon)
38
39    document.save(output_path)

直线和折线使用 stroke,因为它们绘制的是轮廓。多边形同时使用 fill 和 stroke,因为它创建了一个闭合区域。

下图展示三个元素的区别。<line> 绘制一个直线段,<polyline> 根据 points 列表绘制开放的折线,<polygon> 自动闭合点列并形成填充三角形。

使用 Aspose.SVG for Python 创建的 SVG 直线、开放折线和填充三角形多边形

常见错误和修复

问题修复
形状没有显示确认元素已通过 append_child() 追加到 SVG 根元素
形状在可见区域之外检查 viewBox、坐标、width 和 height
直线不可见设置 stroke 和 stroke-width;fill 不能让直线可见
多边形看起来未闭合或不正确检查 points 坐标对及其顺序
圆角矩形没有圆角在 <rect> 元素上设置 rx 或 ry

常见问题

下面的回答使用与示例相同的 DOM 模式:用 document.create_element_ns(namespace_uri, element_name) 创建 SVG 元素,设置几何和样式属性,将其追加到 SVG 根元素,然后保存文档。

我可以在 Python 中创建哪些 SVG 形状元素?

您可以创建 rect、circle、ellipse、line、polyline 和 polygon 等基本 SVG 形状元素。它们适用于框、徽章、标记、简单图表、连接线、三角形以及其他直边形状。

如何用 Python 绘制 SVG 矩形?

使用 rect 元素并设置 x、y、width 和 height。再添加 fill、stroke 或 rx 等样式属性,将矩形追加到 SVG 根元素,然后保存文档。

如何用 Python 绘制 SVG 圆?

使用带有 cx、cy 和 r 的 circle 元素。添加 fill 或 stroke 属性,将圆追加到 SVG 根元素,然后保存 SVG。

如何用 Python 绘制 SVG 椭圆?

使用 ellipse 元素,用 cx 和 cy 设置中心,再用 rx 和 ry 设置水平和垂直半径。在追加元素之前,可以添加 fill、stroke 或 opacity 属性。

如何用 Python 绘制 SVG 直线?

使用 line 元素并设置 x1、y1、x2 和 y2。直线需要 stroke,通常还需要 stroke-width;只设置 fill 不会让直线可见。

如何用 Python 绘制 SVG 折线?

使用 polyline 元素,并将 points 属性设置为坐标对,例如 "30,120 70,75 115,110"。如果只需要连接轮廓,请设置 fill="none"。

如何用 Python 绘制 SVG 三角形?

使用 polygon 元素,并在 points 属性中提供三个坐标对,例如 "50,10 90,80 10,80"。添加 fill 和 stroke,将多边形追加到 SVG 根元素,然后保存 SVG。

如何用 Python 创建 SVG 圆角矩形?

使用 rect 元素,并在 x、y、width 和 height 之外设置 rx 或 ry。rx 和 ry 值控制圆角半径。

为什么我的 SVG 形状不可见?

形状不可见通常是因为它没有追加到 SVG 根元素、位于 viewBox 之外,或缺少必要的绘制属性。对于直线和折线,请设置 stroke 和 stroke-width;对于闭合形状,请设置 fill、stroke 或两者。

什么时候应该使用 polygon 而不是 path?

当闭合形状由直线段组成时,请使用 polygon。当形状需要曲线、混合命令、多个子路径或更复杂几何时,请使用 <path>。

相关文章