svg-pan-zoom-container
svg-pan-zoom-container copied to clipboard
Can't manually scale with values < 1
Hello,
this shows the uncorrect result:
https://jsfiddle.net/xh295kws/1/
Is there a way to fix this?
In any case, at the current state, min possible scale should be set to 1 (update the doc), in order to avoid undefined behaviors.
Thanks!
Ok so I'm not the only one that seems to have this issue either. I've tried both setScale and zoom and for some reason they don't seem to work outside of the wheel event. Any idea why this would be?
I think I may have found this issue, but only a partial solution. It seems when using the mouse wheel, the options
object gets set and filled and sent to the zoom
and setScale
methods. When you do this manually, it does NOT go and grab this object from the container, which means the minScale is set to 1 and that means it can only grow. Creating this options
object and setting it in setScale seems to allow it to scale as it should... BUT because you don't have mouse coordinates, the client property is set to x & y 0 and it messes with the pan. If i can come up with a solution, I will try and submit a pull request for a fix.
Container
<div id="svg" data-zoom-on-wheel="min-scale:0.1; max-scale:1000;" data-pan-on-drag>
</div>
Manual Set
const options = { origin: { clientX: 0, clientY: 0, }, minScale: .1, maxScale: 1000, }; _svgPanZoomContainer.setScale(_svg, +diff/100, options);