以编程方式确定 SVG 路径生成的形状

Posted 2023-02-22

【中文标题】以编程方式确定 SVG 路径生成的形状

【英文标题】：Programmatically determine shape generated by SVG path

【发布时间】：2016-08-20 16:37:47

【问题描述】：

我正在开发一个开源图形库，该库提供基于 D3 的高级抽象。我想编写集成测试来验证饼图抽象实际上正在生成切片，条形图实际上正在生成矩形条等等。据我所知，这需要查看呈现的 svg 路径的 d 属性，其中包含绘制元素所需的一系列命令。

例如，给定以下路径，我希望能够确定它将呈现什么形状（这里是“饼图”）

<path d="M1.0409497792752502e-14,-170A170,170,0,0,1,109.2738936467117,-130.22755533022627L0,0Z" ></path>

我可以创建一个字典，将一系列命令映射到一个形状（例如“M A L Z”=>“Pie Slice”）。但是，这不会肯定地确定形状 - 这实际上只是一个最佳猜测。我真正想要的是一种评估命令并积极确定它们会产生什么形状的方法。我更关心识别常见的图形形状（圆形、矩形、正方形、线条等）而不是任意形状（“17 面对象")。

关于从 SVG 路径命令中积极识别生成的形状有什么建议吗？ 还没有找到任何可能有帮助的库。接受更多关于如何验证 SVG 元素生成的形状的一般建议（除了屏幕截图比较）

【问题讨论】：

为什么不截图比较呢？ （或者至少是位图版本与已知正确位图的异或比较？）

如果 d3 总是使用序列 MALZ 生成切片，那么这似乎是一个非常可靠的启发式方法。您可以更进一步，检查圆弧的两端是否与饼图的中心（L 坐标）等距 - 在一些小的误差范围内。这几乎是结论性的。

这些年我做了很多d3的可视化，一般用rect画条形图，用circle做圆形等等...回答你的问题但是，实际问题是，我会检查 adjacent L 段的角度。 90 度是一个矩形，注意，相邻的 Ls 可以以 M 开头并以 M 结尾一个L。

什么是相反的，给定一个形状我可以得到 svg 路径

【参考方案1】：

老问题，但仍然开放。 我知道这个问题使问题看起来很困难，但实际上如果您想测试自己的程序，可以假设您知道给定输入测试向量的正确结果应该是什么，并且您进行了“d”字符串比较.如果您最终测试 SVG 指令序列，您最终会测试输出的子集，就像您将丢弃数字一样。

您提出的问题超出了 SVG 单元测试的范围，而是识别由黑盒生成的 SVG 路径的形状。 SVG 不是一个正式的形状描述符，它可以比作一个指令集，有无数种方法可以生成相同的形状。想象一下我生成一个弧然后用一个矩形覆盖它，结果你只会看到一个矩形，这是错误的吗？不，这是否会误导仅检查 SVG 序列，是的。

因此，在像素级别进行测试的建议可能是唯一可靠的选择，并且分类引擎很可能能够对形状进行分类。