1

I am using Raphael to draw some shapes on the page. The <svg> is already set to { width:100%; height:600px } and that is working fine. As I resize the browser width, I would like to adjust the shapes inside the <svg> to fit the new width. Ideally this should happen automatically; it just seems wrong to have to manually scale each shape and path on window.resize.

I know that percentages are illegal in the path string but this is essentially what I am looking to do:

var r = Raphael('container', '100%', 600);
r.path("M0,0 L0,0 55%,0 100%,61z")
Jeff
  • 13,943
  • 11
  • 55
  • 103
  • 1
    Call Dmitry Baranovskiy? – Ashwin Krishnamurthy Jun 21 '12 at 14:31
  • @AshwinGanesh Why didn't I think of that?! Do you have his number? :) – Jeff Jun 21 '12 at 14:33
  • 2
    Perhaps [this topic](http://stackoverflow.com/questions/4322660/scaling-svg-raphael-js-like-an-swf) would be relevant to your question? – raina77ow Jun 21 '12 at 14:45
  • @raina77ow That looks promising. I'll check it out. Thanks. – Jeff Jun 21 '12 at 15:02
  • @Jeff, International call - Adobe Australia - Operator - Dmitry :P Just kidding. I have faced a similar problem `onresize`, ended up writing separate scaling functions. I have been searching the net for a quite a bit now. Nothing promising. However, raina77ow's suggestion seems to be interesting. – Ashwin Krishnamurthy Jun 22 '12 at 05:32

1 Answers1

0

You should first use an absolute width and height for both the paper and the path. You will also need to set the viewBox on the paper using setViewBox().

From there, you set the width of div#container to 100% using CSS. You may also need to set body and html as such:

body,
html {
margin: 0;
width: 100%;
}
tnsingle
  • 139
  • 1
  • 11