search

bumbu / svg-pan-zoom

JavaScript library that enables panning and zooming of an SVG in an HTML document, with mouse events or custom JavaScript hooks
https://github.com/ariutta/svg-pan-zoom#demos
BSD 2-Clause "Simplified" License
1.76k stars 389 forks source link

Re-positioning controls #433

Open dmb0058 opened 1 year ago

dmb0058 commented 1 year ago

Hi!

Amazing work - thank you so much. A small question: how to re-position the zoom controls to the top-left ?

I found this https://github.com/bumbu/svg-pan-zoom/issues/312#issuecomment-418888511 and I think the custom controls approach is what I need, but the link to the example is broken.

Thanks for any help,

David

lancedouglas1 commented 1 year ago

This works for me:

            // reposition the controls
            const controls = document.querySelector('g[id="svg-pan-zoom-controls"]');
            //get height and width of svg
            const svgHeight = svg.getBoundingClientRect().height;
            const svgWidth = svg.getBoundingClientRect().width;
            //set the controls to be 15% from the top of the svg and 100px from the right
            controls.setAttribute('transform', 'translate(' + (svgWidth - 100) + ', ' + (svgHeight * 0.15) + ')');

I also wrap this in a function that fires on window resize.