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

时间:2016-04-26 17:32:53

标签: javascript testing d3.js svg graph

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

例如,给定以下路径,我希望能够确定它将呈现什么样的形状(这里是一个"馅饼切片")

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

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

有关从SVG路径命令中积极识别生成的形状的任何建议吗? Haven已经能够找到任何可能有用的库。如何验证SVG元素生成的形状(除了屏幕截图比较),可以获得更一般的建议

1 个答案:

答案 0 :(得分:0)

旧问题,但仍未解决。 我知道这个问题使问题看起来很困难,但是实际上,如果您要测试自己的程序,可以假设您知道给定输入测试向量的正确结果是什么,并进行“ d”字符串比较。如果您最终测试了SVG指令序列,那么最终您将测试输出的一个子集,因为您将丢弃这些数字。

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

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

相关问题