23

I have seen several threads that adress this question but nothing that really solves my problem. I have a SVG file with a map and differrent regions ( http://www.mediafire.com/?5pmyevdwbyrb51f ). I want do do something like this: http://raphaeljs.com/australia.html.

But the question is how I can convert the file so that is works in the script? How do I get those coordinates? I have tried several converters and such but I must suck at this 'cause I cant get it to work. Maybe someone can help out?

larschanders
  • 1,951
  • 3
  • 16
  • 21
  • possible duplicate of [SVG files in Raphael, can they be used?](http://stackoverflow.com/questions/3135061/svg-files-in-raphael-can-they-be-used) – Peter O. Dec 07 '12 at 16:14

3 Answers3

9

If you mean using Raphael to import an SVG file so you can display it or manipulate it, it's not currently supported. But you might want to check extensions raphael-svg-import or raphael-svg-import-classic.

See also SVG files in Raphael, can they be used?

Community
  • 1
  • 1
Clafou
  • 15,250
  • 7
  • 58
  • 89
  • Thanks for the answer. Already tried them though and cant get any one them to work. If someone feels they wanna give it a try, I have the link to my file in my first post. Dont know what Im doing wrong. Tried with different "settings" in InkScape aswell but this isnt my cup of tea... – larschanders Oct 28 '11 at 10:19
  • I've also tried the converter [here](https://github.com/wout/raphael-svg-import) but you need to write down the entire content of your svg file and it will not accept any of the svg format produced by inkscape. – Marco Disce Aug 06 '13 at 06:27
1

Additionally to mikefrey's answer using rapper, an example:

var paper = Raphael(0, 0, 160, 600);

var rappar = [...]; // here use the output from rappar

var graphic = paper.set();
rappar.forEach(function (item) {
  graphic.push(paper
    .path(item.path)
    .attr('fill', item.fill)
    .attr('stroke', item.stroke)
    // ...
  );
});
graphic.transform('s0.8,0.8,0,0');
// ...

Using Raphael v2.2.6 and rappar v0.0.2.

Community
  • 1
  • 1
Wtower
  • 18,848
  • 11
  • 103
  • 80
1

Look at the code of:

http://raphaeljs.com/tiger.html

<script src="tiger.js">
// Load the file with the tiger mapping to a variable
     var tiger = [0,0,600,600,{type:"path",path:"M-122.304 84.285C-12...
</script>

<script>
 // run it
 window.onload = function () {
    var r = Raphael(tiger).translate(200, 200);
 };
</script>
fmsf
  • 36,317
  • 49
  • 147
  • 195
  • I dont see how that helps me. That example doesnt use a SVG file? Explain it to me if Im being stupid now. The problem is to get those coordinates (like the ones in tiger.js) from my file. – larschanders Oct 28 '11 at 08:23
  • With this solution, you would have to AJAX in your .svg file as .txt and pull the path data to provide to Raphael. It's actually a pretty decent solution – netpoetica Sep 16 '13 at 17:29
  • This answer only covers a very small subset of the problem. An SVG path contains much more than path data, and an SVG document contains much more than paths. – sam hocevar Mar 05 '21 at 07:36