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

Ian*_*ber 5 javascript testing svg graph d3.js

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

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

<path d="M1.0409497792752502e-14,-170A170,170,0,0,1,109.2738936467117,-130.22755533022627L0,0Z" ></path>
Run Code Online (Sandbox Code Playgroud)

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

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

was*_*ila 0

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

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

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