Geek Answers Handbook

Unable to scale multiple paths in Raphael?

I tried using the current top SO question: Scaling multiple paths with raphael

... without much luck. I am building a map of the United States through Raphael, and although the map is very nice, I need it to be probably 30% of the size that it is now.

I managed to change the attr on Raphael's original canvas to ".5", but this is only the size of each individual path instead of the entire canvas. I also tried using javascript to scale the div containing the canvas to no avail.

Ways: 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 on my neck to make it work. The image below Raphael's map shows the size I'm aiming for. I feel like I'm close, maybe I'm calling the wrong object to resize?

Help me Obi Wan!

Thank!

+5
source share
3 answers

Add a viewBox parameter and save the ApectRatio to the SVG element. I tried to add these parameters, just to see if I was able to resize, and I did.

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

Read more about the viewBox attribute here .

+1
source

, , , raphael, Paper.setViewBox(...), ?

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

, . 2, : (

( , . , ...)

+1

More articles:


All Articles