SVG viewBox zoom in the center (Raphael)

I am trying to scale a mouse wheel on Raphael's paper using the viewBox. Here is the JSFiddle code.

it works, but now I want to zoom in on the center, and I have no idea where to start. I think I should change the coordinates of viewBox x and y. I tried this (in function descriptor (delta)):

x = paper.width - viewBoxWidth;
y = paper.height - viewBoxHeight;
paper.setViewBox(x,y,viewBoxWidth,viewBoxHeight);

but did not work. I would be grateful for any help. Thank!

+5
source share
2 answers

Since your question has been answered on the mailing list, I will insert it here for future reference:

https://groups.google.com/forum/#!topic/raphaeljs/K-84cOe8ZP8

+6
source

:

var tempViewBoxWidth = viewBoxWidth;
var tempViewBoxHeight = viewBoxHeight;

viewBoxWidth /= 1.10;
viewBoxHeight /=1.10;

viewBoxX -= (viewBoxWidth - tempViewBoxWidth) / 2;
viewBoxY -= (viewBoxHeight - tempViewBoxHeight) / 2; 

paper.setViewBox(viewBoxX, viewBoxY, viewBoxWidth, viewBoxHeight, false);
+4

All Articles