Calculating SVG paths

Question

I have a quite complex image map (made up of over 150 pieces) and I want to convert the coords within the map to SVG path standard format.

The reason why is I want to use the following instead of an image map http://raphaeljs.com/australia.html. But I need the coords to be in SVG path standard format.

How can I convert an image map to SVG coordinates?

Cheers Anthony

Tarsometatarsus

Answer 1

Assuming you are talking about a HTML image map? SVG path markup is very similar to what you gave in a HTML imagemap. Say you have:

<area shape="poly" alt="" coords="0,0,115,0,115,23,92,60,92,111,0,111" />

The same thing in path markup would be

M 0,0,115,0,115,23,92,60,92,111,0,111 Z

An uppercase M indicates that startPoint is an absolute value. The example you have linked to appears to hyphen separate the points with no spaces. So you might what to try something like

M0,0-115,0-115,23-92,60-92,111-0,111Z

Misology