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.

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

Look at the code of:


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

 // run it
 window.onload = function () {
    var r = Raphael(tiger).translate(200, 200);

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) {
    .attr('fill', item.fill)
    .attr('stroke', item.stroke)
    // ...
// ...

Using Raphael v2.2.6 and rappar v0.0.2.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   How to store a global value (not necessarily a global variable) in jQuery?

Similar Posts