Question

How can i rescale all the element inside a Raphael canvas on window change ?

considering the following code / DEMO if i re-size my window only div container scaled since i set its width to 50% of the window width and none of the (rect , circle or path) change

CODE

<div id="container"></div>​
 #container{border : 1px solid black ;
               width : 50% ;
               height:300px}​
var con = $("#container");
var paper = Raphael(con.attr('id'), con.attr('width'), con.attr('height'));
var win = paper.rect(0,0,400,300).attr({stroke: 'black' }) ; 
var path = paper.path("M 200 100 l 100 0 z") ; 
var cir = paper.circle(50, 50, 40);

​

Answer 1

If you use Raphaël version 2.0 or later an alternative is to call paper.setViewBox to setup your coordinate system, and then let the browsers handle the resizing automatically.

Update: Ok, turns out Raphaël is a bit less auto-scalable than I thought… anyway, here’s an example (raphaël still sets an absolute width/height on the root <svg>, so they need to be removed for normal svg scaling to take place). The size is then decided by CSS, and the svg is just fit into the area given. It’s possible to tweak this to deal with overflowing content, which can happen due to the svg viewBox aspect-ratio not matching the CSS box it’s placed into. You do this by adding a preserveAspectRatio attribute to the root svg element.

You can read more about the values you can set on the svg preserveAspectRatio attribute here, but the three values that are probably of interest are 'none' (for squeezing/stretching to fit whatever rect is given), 'xMidYMid slice' (to scale up to fill the rect, possibly clipping away some parts if the aspect doesn’t match), 'xMidYMid meet' (this is the default, same as not specifying pAR at all, and means the content will be centered and will overflow in one direction if aspect doesn’t match).