question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

getScreenCTM / Zoom bug with svgs that are not positioned at the left top of the document

See original GitHub issue

I had a problem with zooming to the mouse position when an svg isn’t rendered at the top left corner of the browser but somewhere else in the document. (See also #132, which contains an example of the current behavior)

I traced it down to the transformToScreen method, where getScreenCTM is used. getScreenCTM returns the offset of the svg to the top and left corner of the document and from there on calculates all positions using this offset. But the “zero point” of the svg is still at 0/0 - the offset isn’t necessary and shouldn’t be used at all. When replacing the value of the following lines with 0, everything works as expected: https://github.com/anvaka/panzoom/blob/3c5734f9a0ab0958822c9f639e5ede82e6815c5e/index.js#L181 https://github.com/anvaka/panzoom/blob/3c5734f9a0ab0958822c9f639e5ede82e6815c5e/index.js#L182

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
felixwahnercommented, Dec 19, 2019

This works like a charm. Thanks for the quick fix!

1reaction
anvakacommented, Dec 12, 2019

I’ll take a look later tonight (pacific time). If I recall correctly, that was done to make sure svgs with viewbox work correctly, which is obviously incorrect for the reasons you guys have mentioned.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Browser zoom breaks svg layout - Stack Overflow
This means that the rectangle's boundary edges (top, right, bottom, left) change their values every time the scrolling position changes ...
Read more >
Here's How I Solved a Weird Bug Using Tried and True ...
The SVGs have some CSS applied to them from a stylesheet. The affected SVGs are positioned inside a <button> HTML element. The issue...
Read more >
Draggable SVG elements - Peter Collingridge
We can get the position of the mouse using evt.clientX and evt.clientY, and use these to update the coordinates of the element. function...
Read more >
How to Translate from DOM to SVG Coordinates and Back Again
Mix DOM and vector interactions in SVG, translating from SVG to DOM coordinates and back, and translating to transformed SVG coordinates.
Read more >
Scalable Vector Graphics (SVG) 2 - W3C
The ' x ' and ' y ' attributes specify the top-left corner of the rectangular region into which an embedded 'svg' element...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found