Вопрос по svg, javascript – Рафаэль JS: как найти путь изображения SVG?

4

Используя GIMP, я получил путь каждого континента вhttp://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg но теперь я не могу понять, как преобразовать этот SVG-файл в нечто подобное (выбрано изhttps://github.com/thomaspeklak/raphaeljs-worldmap):

Подскажите, пожалуйста, как мне преобразовать SVG-путь в 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);

-Спасибо

Не могли бы вы сделать скриншот того, что вы получаете, или создать jsfiddle, чтобы люди могли легко увидеть ваш текущий прогресс? halfer
Я попытался GIMP для вывода пути SVG, но он выглядит иначе, чем путь Рафаэля. HaveFun MediaSolutions

Ваш Ответ

1   ответ
7

вы работаете с векторами, так что вы, вероятно, получите лучшие результаты вInkscape («Adobe Illustrator» с открытым исходным кодом), а не gimp («Adobe Photoshop с открытым исходным кодом»).

Хорошим первым шагом было бы импортировать его в Inkscape, использовать любой инструмент Inkscape, аналогичный инструменту упрощения пути Illustrator (предполагая, что низкий размер файла важнее, чем очень высокий уровень детализации в большинстве карт SVG в Википедии - будьте осторожны, чтобы он не нарушает границ страны) и экспортируется как SVG. Возможно, вы также захотите присвоить каждой стране форму соответствующего идентификатора (например, название страны или код страны) в Inkscape, если у них его еще нет, чтобы сэкономить время позже.

Затем, чтобы превратить это в логику Рафаэля, есть три варианта:

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.

И не забудьтеучиться на примерах.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы