-
Notifications
You must be signed in to change notification settings - Fork 389
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SVG being cropped at the 0,0 #441
Comments
In short, the viewport is always starting on 0,0. There is no way of having it starting before. But for some reason, when I resize the browser by reducing its size the whole image is displayed. I tried hundreds of workarounds but no one could help me here. Actually, I could make it show the whole content of the svg when doing this the following trick... sizes = panZoom_instance.getSizes()
var x = -100;
var y = -100;
var w = sizes.viewBox.width + x;
var h = sizes.viewBox.height + y;
var img1 = document.getElementById('diff-xlink-1');
img1.href.baseVal = img1.href.baseVal + `#svgView(viewBox(${x}, ${y}, ${w}, ${h}))`
var img2 = document.getElementById('diff-xlink-2');
img2.href.baseVal = img2.href.baseVal + `#svgView(viewBox(${x}, ${y}, ${w}, ${h}))` |
This is a question regarding showing svg content before
x,y = 0,0
I am comparing 2 svgs one over another to create something like a diff tool using existing svg files on my computer.
This is the pan and zoom instance I am creating:
Using this I was not able to display svg images that are out of the page/viewbox boundary.
I tried to add a a transform group with translation after the
<g class="my_svg-pan-zoom_viewport">
but it did not work.Something weird I found is that when the browser is full screen, or big enough, the svg is cropped on 0,0 so it does not show things that were placed before this point. But if I reduce the browser by splitting the screen... the missing data is now displayed...
Is there any way to fix or workaround having the image being cropped at the
0,0
? I am probably doing something nasty since I am not a js/html expert.For instance, this is one of the svg files I am displaying. There is a square before the origin (top, right). This is a screenshot of Inkscape.
When then the browser is big/fullscreen this is what I see. Not the missing rectangle
If I reduce the size of the browser the cropped image changes, so it is possible to see the whole content as it is possible to see here.
I would appreciate any idea that helps me display the whole svg image.
If this helps understand the issue, here is the header of one of my svg files
The text was updated successfully, but these errors were encountered: