Menu
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
745
A better solution is to consider the parametric function of the non linear segment and integrate it respect the X axis ( calculate the area between the curve and the X axis ) and sum it as I sum the area of the linear segments. This involves some math but you can find the help you need here.
The <path> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more. Paths create complex shapes by combining multiple straight lines or curved lines. Complex shapes composed only of straight lines can be created as <polyline> s.
If you have a complex svg (i.e. one with many objects in it), use CTRL A to select all, SHIFT CTRL C to convert any objects to paths, then use union CTRL + and / or combine CTRL K to merge them into a single path.
You can change the svg viewBox attribute to center the path. This is especially useful if you have several paths in the svg, so you do not have to add a transform to each one. In your example that would be viewBox="0 15.674 144 144" , getting the y-offset the same way as in Pauls answer.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
