Is there a way to resize an SVG element when window is resized

[Willy Nolan]

Hi,

I make a parent SVG element using e = Snap(x, y); on load, and I want to adjust the size of that specific parent element when a page is resized (I am detecting this via jquery's resize event).  I tried to adjust the size by saying e = Snap(newX, newY);

but the dimensions do not change.  Anybody have a good way to change the size of a parent .svg element? Thank you.

[Raymond Uphoff aka myradon]

I think svg.attr({ width: X, height: Y}) should work. I resize SVG with CSS so it should work with JS. And don't chnage the viewbox-attribute.

[Anthony Greco]

Yeah, via attr() method is what I do. And you don't need jQuery if you don't want to use it. ;) Something like:

onWindowResize = function() {
  paper.attr({
    width: $window.innerWidth,
    height: $window.innerWidth
  });
}
angular.element($window).bind('resize', onWindowResize);

[melaga...@gmail.com]

Hi Anthony,

Do you have a working example in jsffidle or something please?!

[Anthony Greco]

Sure! Here's a quick example: http://jsfiddle.net/anthonygreco/5UqFC/

jQuery is used here but not required unless you need to support archaic browsers.

If you were actually wanting to see an example in Angular, what you see in the previous post should work fine assuming you've injected $window.

FYI, if you view this using the full page result something weird happens, at least for me, in the framing and resize doesn't seem to get triggered on the adjustment of the height of the window alone, but everything should work fine in real environment.

[melaga...@gmail.com]

Thank you Anthony, That is great.

[melaga...@gmail.com]

Anthony, Is there a way that , when you resize the paper it resizes everything inside that paper as well?!

[Carles Codony]

I don't know if this will help you, but one way to resize everything is to make the SVG fill a div (100% width and height) and make that div resize proportionally.

It's mostly a hack and you have to make the viewBox and the div aspect ratios to match, but after that it works OK.

Here's an example:

http://jsbin.com/hecaq/1/

[Anthony Greco]

melaga888888:

I think it may be beneficial to look at the SVG viewbox attribute. There is a nice explanation here and the SVG Spec is here. In conjunction with the preserveAspectRatio attribute (the very next section on the SVG Spec url) you should be able to achieve what you want. Past that, you could apply the same attr() adjustments accordingly to what ever elements you need scaled in the resize event, which can be handy if you just want to scale a few key elements, but trying to scale all of the elements could lead to slow performance. Though, if you still need to do that you could use an interval checking routine of sorts and only perform the scaling after the window has stop resizing. Disclaimer, I've done a little bit of all of that throughout a few different projects and it ends up, for me at least, that it can be quite dependent to the project, so I make no claim that any or all of these methods are "correct". :P 

[melaga...@gmail.com]

Thank you Carles and Anthony, For now the Carles solution would work perfect for what I want to achieve! Thanks again.