I have built an ASP.NET MVC application which will render a floor plan in SVG after a user selects a specific buildling and floor. Using Timmywil's panzoom library, I've added the ability for users to move the floor plan around and zoom in or out on it. The floor plan is initially rendered in the center of the screen and the zoom is adjusted so the whole floor plan is visible.
Via a button, users can save the floor plan in PDF format. After this button click, the SVG tag with the paths inside is used as input to convert it. However, only the initial situation is saved since the viewbox and coordinates are still the same. I've used Timmywil's samples to demonstrate my problem. Below is the initial situation. So the floor plan (in this case a lion) is nicely centered and fully visible inside of the div (the black bordered box):
In the situation a floor plan is really large and a user would only like to have a certain part of saved (picture 2 and 3), it should 'crop' the SVG, but I'm having trouble finding the numbers and making the calculations to achieve this. I guess it has to be done by changing the viewbox values.
Could someone help me out?
from Crop zoomable and movable SVG to what is visible in the div
No comments:
Post a Comment