search

gerbenv / svgpan

Automatically exported from code.google.com/p/svgpan
0 stars 0 forks source link

Incompatibility with viewBox attributes #7

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
If I use SVGPan together with an SVG which uses a viewBox attribute on either 
the root <svg> element or the top-most <g> element the behaviour of SVGPan is 
erratic in both Google Chrome and Firefox.

Any event including mouse-move, mouse-click and mouse-wheel cause the displayed 
image to get smaller, with no way to get it back.

This is a serious problem because it makes it very difficult to get the SVG 
image to scale to fit the available space by default - which is normally why 
the viewBox attribute is used.  Alternative approaches using 
transform="scale(x)" can be made to work, but it can be very cumbersome to 
compute the required scale.

The handling of viewBox in the getRoot() function doesn't seem to have the 
desired behaviour.

What is the expected output? What do you see instead?

I expect the viewBox attribute on the <svg> or topmost <g> element to be 
respected when initally displaying the SVG.

Otherwise, thanks for a very useful library!

Original issue reported on code.google.com by robert.smallshire@gmail.com on 13 Jul 2011 at 2:50

GoogleCodeExporter commented 8 years ago 
Hello Robert,
can you attach/point out a test case? 

The example here http://www.cyberz.org/projects/SVGPan/tiger3.svg has the 
viewBox attribute and seems to work.

Thank you,

Andrea

Original comment by andrea.l...@gmail.com on 13 Jul 2011 at 9:19

GoogleCodeExporter commented 8 years ago 
Hi Andrea,

I've included some test cases which demonstrate the problem.  first of all, 
here are two 'base cases' which don't use SVGPan at all:

1A) viewbox_on_root_respected.svg : This file has a viewBox attribute on the 
root <svg> element without SVGPan.  When displayed in Google Chrome the SVG is 
resized to fit the available space.

2A) viewbox_on_group_ignored.svg : Still without using SVGPan, moving the 
viewBox attribute from the <svg> element to the top-most <g> element results in 
the viewBox being ignored by Chrome. 

Now some cases which include SVGPan.js and which don't work as expected:

1B) svgpan_erratic_with_viewbox_on_root.svg.  This is the same as 1A, with the 
viewBox attribute on the root SVG node, but uses SVGPan in addition. The 
picture starts off at about half of the desired size. Clicking or using the 
mouse wheel causes it to get smaller and smaller (bug!) 

2B) svgpan_viewbox_on_group_ignored.svg  This is the same as 1B, with the 
viewBox attribute on the top-most <g> element.  Again the viewBox is ignored 
for the initial picture size (bug?!) but at least the SVGPan zooming and 
panning functionality works.

So in summary, with the current implementation it looks like I can have a 
correct initial size (1A) or panning and zooming (2B) but not both.

I hope this helps. Let me know if you need more from me.

Thank you,

Rob

Original comment by robert.smallshire@gmail.com on 14 Jul 2011 at 10:28

Attachments:

GoogleCodeExporter commented 8 years ago 
I have the same issue with a SVG file. If I include svgpan.js while having an 
viewBox-attribute on the root element, every time I click on the (for panning) 
its size is reduced. This does appear in Chromium, Opera and Firefox.

Testcase:
https://static.thomas-heuer.eu/snippets/svgpan/country_select-original.svg
(the map fills the browser-window, but should not outrun the window-borders)

https://static.thomas-heuer.eu/snippets/svgpan/country_select-svgpan.svg
(the map fills the browser-window for just a second and is instantly scaled 
down, is further scaled down while clicking on the image or using the mouse 
wheel above it)

https://static.thomas-heuer.eu/snippets/svgpan/country_select-svgpan-without-vie
wbox.svg
(the map goes far beyond the viewport, but zooming and panning works as 
expected)

I haven't found a way to fit this image inside the viewport without using 
'viewBox'. Not using 'viewBox' also causes the image to outrun the 
object-boundaries when included in an HTML-file.

Original comment by projekte@thomas-heuer.eu on 21 Jul 2011 at 2:17

GoogleCodeExporter commented 8 years ago 
Hello Robert,
I've changed the code to handle the viewBox attribute in the root as well. It 
should work. Give it a try on 
http://www.cyberz.org/projects/SVGPan/debug/svgpan_root.svg (original file 
http://www.cyberz.org/projects/SVGPan/debug/svgpan_root2.svg) and 
http://www.cyberz.org/projects/SVGPan/debug/svgpan_group.svg (original file 
http://www.cyberz.org/projects/SVGPan/debug/svgpan_group2.svg).

Andrea

Original comment by andrea.l...@gmail.com on 31 Jul 2011 at 12:25

GoogleCodeExporter commented 8 years ago

Original comment by andrea.l...@gmail.com on 31 Jul 2011 at 12:32

GoogleCodeExporter commented 8 years ago 
Hello Andrea,

I checked all the above 4 links with the one that had the viewbox attribute in 
Firefox.
It is still not working. 
After I have the viewbox attribute to say viewBox="0 0 200 200" in the svg 
element, Iam unable to neither pan nor zoom the image.
Could you please clarify.

Thanks

Original comment by friendly...@gmail.com on 7 Mar 2012 at 5:54