javascript - Raphael JS - Use a SVG file - Stack Overflow

admin管理员组

文章数量:1194568

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

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?

• javascript
• svg
• raphael

Share Improve this question Follow edited Mar 5, 2024 at 17:13 General Grievance 4,9983737 gold badges3737 silver badges5555 bronze badges asked Oct 28, 2011 at 8:06 larschanderslarschanders 1,98944 gold badges1717 silver badges2222 bronze badges 1

• possible duplicate of SVG files in Raphael, can they be used? – Peter O. Commented Dec 7, 2012 at 16:14

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 10

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:

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>

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.

本文标签： javascriptRaphael JSUse a SVG fileStack Overflow