Can't scale multiple paths in Raphael?

Question

I've tried using the current top Question on SO : Scaling multiple paths with raphael

...without much luck. I'm building a map of the USA through Raphael and while the map is very nice, I need it to be probably 30% the size it is currently.

I was able to change the attr on the initial Raphael canvas to ".5" but that only sized each individual path instead of the whole canvas. I have also tried using javascript to scale the div containing the canvas to no avail.

Paths: Actual Page: http://praxxgray.com/am/rafe2/mapTest.html

javascript: http://praxxgray.com/am/rafe2/js/initMap.js

I'm new to Raphael, but I have bosses breathing down my neck to get it working. The image beneath the Raphael map shows the size that I'm aiming for. I feel like I am close, perhaps I am calling the wrong object to be resized?

Help me Obi Wan!

Thanks!

Answer 1

Don't know if this'll help, and it's a bit off the cuff, but have you tried sticking your map in it's own raphael instance and then using Paper.setViewBox(...) to resize it?

 var map = Raphael(100,100,800,500);
 //
 // draw my very big map, bigger than 800x500
 //
 map.setViewBox(100,100,800,500,true); 
 // doesn't change the size of the raphael instance, but will force the graphics to fit
 // inside it.

setViewBox lets you alter the viewport. From the link - "Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by specifying new boundaries".

It might be a quick way to get what you want. It Raphael 2 only though :(

(This should work, but I haven't actually tested it. As I said, it's a bit off the cuff...)

Answer 2

Add the parameter viewBox and preserveAspectRatio to the SVG element. I tried adding these parameters, just to see if I managed to change the size, and I did.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
   viewBox="0 0 2500 3100" preserveAspectRatio="none">

More about the viewBox attribute here.

Answer 3

I came up with this jsfiddle. I'm using this in my own map with multiple regions. Works on IE6,8 & 9

http://jsfiddle.net/chrisloughnane/EUwRq/