Raphael JS – Use a SVG file
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?
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.
Look at the code of:
http://raphaeljs.com/tiger.html
<script src="https://stackoverflow.com/questions/7926643/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>
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.
