Raphael JS: how to find path of an SVG image?

问题

Using GIMP I have obtained path of each continent in http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg but now I am not able to figure out how to convert this SVG file into something like (picked from https://github.com/thomaspeklak/raphaeljs-worldmap):

Can you please guide me how I can convert the SVG path to Raphael Path ?

africa.push(W.path("M13728 10231 c-34 -19 -84 -21 -109 -5 -6 4 -15 1 -19 -5 -5 -9 -14 -9 -35 1 -22 10 -29 10 -33 0 -2 -6 -11 -12 -21 -12 -9 0 -23 -6 -29 -12 -10 -10 -17 -10 -32 0 -27 16 -55 15 -190 -7 -113 -19 -180 -42 -180 -63 0 -5 -7 -8 -15 -5 -8 4 -17 2 -20 -3 -4 -6 -13 -10 -21 -10 -8 0 -26 -11 -40 -25 -14 -14 -30 -25 -37 -26 -25 -2 -62 3 -70 10 -4 4 -33 4 -65 0 -63 -9 -100 6 -109 42 -6 20 -20 24 -39 11 -6 -4 -22 -32 -35 -62 -34 -81 -57 -108 -119 -137 -60 -29 -120 -82 -120 -107 0 -9 -10 -31 -22 -47 -18 -24 -23 -44 -23 -94 0 -38 -5 -69 -12 -76 -7 -7 -13 -18 -13 -24 0 -5 -16 -24 -36 -40 -20 -17 -45 -38 -56 -48 -23 -21 -80 -47 -103 -47 -22 0 -36 -16 -62 -72 -13 -27 -27 -48 -31 -48 -27 0 -82 -82 -82 -123 0 -24 ")
  )
  .attr(attr)
  .scale(0.016963, -0.016963, 0,0)
  .translate(0,-15000);

-Thank you

回答1:

First of all, you're working with vectors, so you're likely to get better results in inkscape ('the open source Adobe Illustrator') than gimp ('the open source Adobe Photoshop').

A good first step would be import it into Inkscape, use whatever Inkscape's equivalent of Illustrator's path simplify tool is (assuming low file size is more important than the very high level of detail in most wikipedia SVG maps - be careful that it doesn't break country borders), and export as SVG. You might also want to give each country shape an appropriate ID (e.g. country name or country code) within Inkscape if they don't already have one already, to save time later.

Then to turn that into Raphael logic, there's three options:

Use Ready Set Raphael (rsr) which is a free SVG to raphael converter web service. Unless rsr has been updated since I wrote this, you'll probably want to tidy up the resulting code:
- Putting it all in a set that works, by putting paper.setStart(); before and var world = paper.setFinish(); after the block of paths (don't forget to substitute paper for whatever you're using).
- Replace-all away all the duplicated .attr()s except for any that set id, then apply attr()s like fill and stroke to the set, rather than each individual element.
- Store your paths in an object for easy access by name. Makes working with Raphael so much easier.
Use some other SVG to Raphael converter or importer (e.g. this one). I don't know if these are any good, I've personally had better experiences with Ready Set Raphael.
Just do it by hand. This can be as simple as copying and pasting the string from d="lots of co-ordinates" from each SVG path into something like var someCountry = paper.path("lots of co-ordinates"); someSet.push(someCountry);. It will be time consuming since there are so many countries (170 or so) but the extra control might save time in the long run.

And don't forget to learn from examples.

来源：https://stackoverflow.com/questions/10452247/raphael-js-how-to-find-path-of-an-svg-image

标签

javascript

svg

raphael