javascript - Raphael JS: how to find path of an SVG image? - Stack Overflow

admin管理员组

文章数量:1336631

Using GIMP I have obtained path of each continent in .svg but now I am not able to figure out how to convert this SVG file into something like (picked from ):

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

Using GIMP I have obtained path of each continent in http://upload.wikimedia/wikipedia/mons/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./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

• javascript
• svg
• raphael

Share Improve this question Follow edited May 6, 2012 at 15:50 Michael Mullany 31.8k66 gold badges8484 silver badges107107 bronze badges asked May 4, 2012 at 15:59 HaveFun MediaSolutionsHaveFun MediaSolutions 24944 silver badges1212 bronze badges 2

• I have tried GIMP to output svg path but it looks different from what Raphael path. – HaveFun MediaSolutions Commented May 5, 2012 at 5:14
• Would you screenshot what you're getting, or create a jsfiddle, so people can see your current progress easily? – halfer Commented May 5, 2012 at 6:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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:

1. 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.

2. 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.

3. 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.

本文标签： javascriptRaphael JS how to find path of an SVG imageStack Overflow