Raphael JS - Use a SVG file

Question

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

Martino

possible duplicate of SVG files in Raphael, can they be used? – Delisadelisle

Answer 1

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?

Gibbeon

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... – Martino

I've also tried the converter here 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. – Grigsby

Answer 2

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>

Livorno

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. – Martino

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 – Deuno

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. – Hoey

Answer 3

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.

Flacon