Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Re-positioning controls #433

Open
dmb0058 opened this issue Nov 29, 2022 · 1 comment
Open

Re-positioning controls #433

dmb0058 opened this issue Nov 29, 2022 · 1 comment

Comments

@dmb0058
Copy link

dmb0058 commented Nov 29, 2022

Hi!

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

I found this #312 (comment) 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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants