Scaling SVG (Raphael.js) like an SWF?

It took me awhile but I finally came up with a solution to this problem. I've wrapped the solution in a small js file that can be used with Raphael. You can get the js file along with some simple documentation here See it in action.

It took me awhile but I finally came up with a solution to this problem. I've wrapped the solution in a small js file that can be used with Raphael. You can get the js file along with some simple documentation here.

See it in action. How it works: use viewBox for svg wrap all vml nodes in a group node wrap the Raphael constructor up so that the vml group node is passed to the Raphael constructor alter a few css properties when the paper is resized to deal with centering, clipping and maintaining the correct aspect ratio. Any feedback would be greatly appreciated.

1 That is awesome! – Clinton Blackmore Dec 9 '10 at 22:25 The URL is bad. – kzh Aug 23 at 12:46 fixed I was down – Zevan Aug 23 at 17:27.

You could loop over all paths and scale() them acording to the new scale of the paper after resizing it.

1 I thought about that, wondering if there is another way. – Zevan Dec 1 '10 at 9:11 Nope, don't think there's a magic solution here. – Shikiryu Dec 1 '10 at 9:15 2 turns out that there is no need to loop if you use a set and do myset.

Scale(2,2,0,0) – Zevan Dec 1 '10 at 22:34 @Zeven Interesting! I didn't look into sets when I used raphaël. – Gipsy King Dec 2 '10 at 9:06 I spoke to soon though.

Unfortunately if you scale a set of objects the coordinate system isn't preserved which can really mess up any animation that might be going on. Meaning the cx and cy change depending on scale. I'm pretty sure this could be avoided if Raphael were using the transform() SVG stuff.

Not sure why scale is done manually rather than with built in SVG functionality. Maybe it has something to do with having the code be easily compatable with VML. I'm going to keep looking into it.

Worst case I'll write some kind of plug-in. – Zevan Dec 2 '10 at 17:18.

Well hello Zévan, I found a nice answer, made by a guy called Zevan. However, I found the code overcomplicated for my liking (Required jquery, did wierd stuff like "$(this)" etc). So I simplified it.It's now short enough to fit into stackoverflow ;): var paper; window.

ScaleRaphael = function(container, width, height) { var wrapper = document. GetElementById(container); wrapper.style. Width = width + "px"; wrapper.style.

Height = height + "px"; wrapper.style. Overflow = "hidden"; wrapper. InnerHTML = ""; var nestedWrapper = document.

GetElementById("svggroup"); paper = new Raphael(nestedWrapper, width, height); paper. W = width; paper. H = height; paper.canvas.

SetAttribute("viewBox", "0 0 "+width+" "+height); paper. ChangeSize = function() { var w = window. InnerWidth var h = window.

InnerHeight var ratioW = w / width; var ratioH = h / height; var scale = ratioW ScaleRaphaël Demo 1.

1 HA! You realize I wrote scaleRaphael right? And yeah VML is/was required... nice work though - I like using jQuery and I think much of the complexity in ScaleRaphael is because I needed VML support.

Cheers +1 – Zevan Jun 13 at 20:44 I know you didn't do vml support, is that why your resize function isn't set up for IE? For me a huge part of Raphael is the VML support... and so the window resize method needs to work in IE – Zevan Jun 13 at 20:48 Superb answer and code. Ts just saved me an enormous amount of trial and error.

Thanks! – Adam Crossland Oct 25 at 14:07.

You could add a 'viewBox' attribute on the svg root element to define the coordinate system, the shapes will then scale to whatever the size of the container is. Not sure how to deal with the VML side of things though. I'd suggest reporting an issue for it, https://github.Com/DmitryBaranovskiy/raphael/issues.

Cool I'll give this a try - and I'll look into the VML side of things. – Zevan Dec 1 '10 at 15:12 This really works great. The equivalent in VML seems to be to wrap all the objects in a group node.

I did this and it actually worked nicely. Only problem is that Raphael wasn't able to fill or style the objects anymore. I guess because of the change to the VML structure.

– Zevan Dec 2 '10 at 17:20 I guess in IE the width and height of the paper could be set to an expression which calculates the dimensions of the parent element. – Spadar Shut Jul 17 at 18:24.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.