Question

I’ve been making some illustrations in illustrator, getting their SVG code and drawing them on the screen using raphael.js to animate and add interactivity on it later.
When it comes to simple shapes and paths, it’s all good. Path(), ellipse() and rec() work just fine. But there are instances in my SVG XML file when I see a <line> element that offers x1, y1, x2 and y2. I have no idea how I should interpet this in raphael and draw it to the screen.

Any ideas?

Answer 1

In Raphael you should convert lines into paths, it is quite simple…

paper.path( [ "M", x1, y1, "L", x2, y2 ] );

Or if you just want to hardcode the values:

paper.path("M 10,10 L 30,30");