mardi 26 avril 2016

Programmatically determine shape generated by SVG path

I am working on an open source graphing library that provides high level abstractions over D3. I would like to write integration tests that verify that a pie graph abstraction is actually generating slices, a bar chart is actually generating rectangular bars, etc. As far as I can tell this requires looking at the d attribute of the rendered svg path, which contains the serious of commands necessary to draw the element.

For example given the following path I would like to be able to determine what shape it would render (here a "pie slice")

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

I could create a dictionary that maps a series of commands to a shape (eg "M A L Z" => "Pie Slice"). However this will not positively determine the shape - it's really just a best guess. What I would really like is a way to evaluate the commands and positively determine what shape they would result in. I am more concerned with identifying common graph shapes (circle, rectangle, square, line, etc) than arbitrary shapes ("17 sided object").

Any suggestions on positively identifying generated shape from SVG path commands? Haven't been able to find any libraries that may help yet. Open to more general suggestions for how to verify the shapes generated by SVG elements (aside from screenshot comparisons)

Aucun commentaire:

Enregistrer un commentaire