Comments (6)
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 [email protected]
on 13 Jul 2011 at 9:19
- Added labels: ****
- Removed labels: ****
from svgpan.
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 [email protected]
on 14 Jul 2011 at 10:28
- Added labels: ****
- Removed labels: ****
Attachments:
- viewbox_on_root_respected.svg
- viewbox_on_group_ignored.svg
- svgpan_erratic_with_viewbox_on_root.svg
- viewbox_on_group_ignored.svg
from svgpan.
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 [email protected]
on 21 Jul 2011 at 2:17
- Added labels: ****
- Removed labels: ****
from svgpan.
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 [email protected]
on 31 Jul 2011 at 12:25
- Added labels: ****
- Removed labels: ****
from svgpan.
Original comment by [email protected]
on 31 Jul 2011 at 12:32
- Changed state: Fixed
- Added labels: ****
- Removed labels: ****
from svgpan.
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 [email protected]
on 7 Mar 2012 at 5:54
- Added labels: ****
- Removed labels: ****
from svgpan.
Related Issues (20)
- Does not find first g-element, only works with id="viewport" attribute
- Mouse cursor loses objects while dragging in Zoom HOT 1
- Type error: matrix is null in Firefox 19. Chromium works without problems. HOT 1
- viewBox is not supported
- panning does not work HOT 1
- Block dezoom at 100%
- settAttributeNS of undefined or null reference
- panning on mobile browser sometimes locks into strictly vertical or horizontal panning
- Antegrate with Angular
- Problems with setCTM when the viewBox transformation is large
- svg inner xlinks fail
- Disable events after dragging
- No wheelmouse under MsIE 11
- Collaborate? HOT 4
- Add tests
- Support specifying a different root element via an attribute on the script
- svgs with viewbox already set won't work well
- preventDefault warning
- demo? HOT 1
- Thank you HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svgpan.