Comments (3)
Didnt find a mistake after having a short look. Might be a bug. Have to look into that deeper. Sorry for the inconvinience!
from svg.panzoom.js.
Same issue for me π
After investigation about the zoom, I realised the difference between a zoom from the root svg and the nested one is that for the root, there are values for the clientWidth
and clientHeight
properties, when for the nested one I always get 0.
Looking at the current master of the core library I found this commit svgdotjs/svg.js@a6dae04, which differ from the current released code, but it will make it clearer why it's not zooming when released.
So first it's not an issue with this plugin, it comes from the main library. And then, my current fix is this
const nested = draw
.nested()
.size("50%", "100%")
.attr({
style: "width: 50%; height: 100%;",
})
.panZoom({ zoomMin: 0.1, zoomMax: 20, zoomFactor: 0.5 });
Apparently, the attributes width and height are not detected properly by the zoom function, and in the current released code, when it's the case the fallback is to get value from the style.
from svg.panzoom.js.
Thank you for investigating @benjaminbours. I simply hadnt the brain ressources atm...
But after knowing the bug its pretty clear π
Yes, clientHeight and width is only defined on a root element because the specs says so. Thats why we try to get the dimensions differently. In the current released version (3.0.16) there was an additional getComputedStyle check for width and height but that often just leads to "auto" if no stye is set. Thats why in 3.1.0 it was remoed and the zoom function will throw if there is no width/height set on the element or clientHeight/width is not usable.
But I just realized that it wont throw with percentage values which it shoult... need to a add a check for that
PS: in 3.1.0 your fix therefore wont work.
from svg.panzoom.js.
Related Issues (20)
- .panZoom is not a function on ES6 modules HOT 5
- low accuracy HOT 5
- [FeatureRequest] Programmatically fit an element into the view HOT 2
- Pan working but not zoom HOT 1
- Panning does not work if I use the margins property HOT 49
- Get current zoom factor HOT 2
- SVG not defined error HOT 18
- Cannot use in SVG files (no type=module) HOT 1
- Request: add event detail to panZoom HOT 4
- New feature: keyboard navigation HOT 3
- Update basic demo to include viewbox HOT 4
- When oneFingerPan is true clicks on SVG elements are not working anymore HOT 13
- Is it possible to obtain the real coordinates within the SVG if the user has zoomed in/out? HOT 3
- pinchZoom: Add option to change the zoom factor HOT 1
- need the zoomend eventοΌis there another way to achieve it?
- Please add a method to pan svg programmatically HOT 7
- Pan / Zoom is blocking <input> in foreignObject HOT 2
- Question: Apply CSS to and svg while zooming HOT 4
- Feature request: transformer key HOT 1
- Select text and copy HOT 3
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 svg.panzoom.js.