CODEWITHSUNDEEP
svgraphael
Armin
Armin

Reputation: 15958

How to create an autosize SVG path with Raphael JS?

I don't understand the way Raphael or SVG works.

I want to create a map of germany, using SVG and Raphael. I have the paths of each administrative area and creation works, but the result got an own size.

I mean, if I tell Raphael being 300x300px and add some paths the objects generated by paths are larger.

Code:

var paper = new Raphael(document.getElementById('svnInnerGroup'), 300, 300);
paper.path('...');

Result: I get a 300x300 pixel SVG graphic (this is good), with the upper left corner of germany (this is not good). I expect that the map of germany would fit to the given size.

Maybe I don't understand the concept, I hope you can help me.

Thanks!

Upvotes: 0

Views: 747

Answers (1)

Armin
Armin

Reputation: 15958

Okay, I have found my mistake! Such SVG graphics always need a "viewbox", which defines the beginning and ending of the document. When I copy any paths from any file, I need to copy and use the viewbox too.

This is how you can set the viewbox with raphael:

paper.canvas.setAttribute("viewBox", "0 0 591 800");

Thanks!

Upvotes: 1

Related Questions