使用NetworkX渲染SVG路径与原图不符的问题排查

你当前的问题根源在于：用networkx+matplotlib的方式把SVG路径当成了离散节点的连线图，但SVG路径包含贝塞尔曲线、圆弧等连续矢量指令，直接提取节点会丢失曲线的连续形态信息；加上SVG和matplotlib的坐标系默认方向相反，最终渲染结果自然和原SVG偏差极大，依赖曲线的字母（如S、O、B）问题会更突出。

以下是具体修复步骤：

1. 正确解析并采样SVG路径 #

svg.path.parse_path能解析出所有路径段（直线、三次贝塞尔、二次贝塞尔等），但不能只提取起点/控制点/终点，需要对每个路径段进行密集采样，还原曲线形状：

from svg.path import parse_path

# 示例路径，替换为你的SVG路径数据
path = parse_path("M100,300 L200,100 L300,300 M150,200 L250,200")
sampled_points = []
# 对每个路径段，按t从0到1取100个采样点，数值越高精度越高
for segment in path:
    for t in range(0, 101):
        pt = segment.point(t / 100)
        sampled_points.append((pt.real, pt.imag))

2. 放弃networkx，直接用matplotlib绘制 #

networkx是做图结构可视化的工具，不适合渲染矢量图形。直接用matplotlib处理采样后的连续坐标点：

• 拆分采样点的x、y坐标数组，用plot绘制轮廓，fill实现填充；
• 翻转y轴，匹配SVG“左上角为原点、y轴向下”的坐标系。

3. 完整可运行示例代码 #

import xml.etree.ElementTree as ET
from svg.path import parse_path
import matplotlib.pyplot as plt

# 读取SVG文件
tree = ET.parse("vertical_flip_a.svg")
root = tree.getroot()

# 提取path元素的d属性（注意SVG的命名空间）
ns = {"svg": "http://www.w3.org/2000/svg"}
path_data = root.find("svg:path", ns).attrib["d"]
path = parse_path(path_data)

# 采样路径点
sampled_points = []
for segment in path:
    for t in range(0, 101):
        pt = segment.point(t / 100)
        sampled_points.append((pt.real, pt.imag))

# 拆分坐标并绘制
x = [p[0] for p in sampled_points]
y = [p[1] for p in sampled_points]

plt.gca().invert_yaxis()  # 匹配SVG坐标系
plt.plot(x, y, color="black", linewidth=2)
plt.fill(x, y, color="black")

plt.axis("off")  # 隐藏坐标轴
plt.show()

额外注意点 #

如果你的SVG包含transform属性（缩放、平移、旋转），需要用svg.transform模块解析并将变换应用到每个采样点上，否则渲染结果会偏移或变形。

内容的提问来源于stack exchange，提问作者Maifee Ul Asad