search

d3 / d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.
https://d3js.org/d3-zoom
ISC License
501 stars 144 forks source link

zoom translation inconsistency on elements with 'transform: scale' #230

Closed ghost closed 3 years ago

ghost commented 3 years ago

When zooming (or dragging) a div element with 'transform: scale(-1)' css, the movement goes in a different direction comparing to svg. This is creating a problem for us, because there is some other logic dependent on that drag that i can not easily change. How can i make div behave like an svg in that case?

I am trying to understand whether the issue is with d3.zoom, or with the browser handling mouse events differently on elements with 'transform: scale' applied. Here is a link to an observable notebook:

https://observablehq.com/@nestorzaburannyi/zoom-test

mbostock commented 3 years ago

The zoom behavior uses d3.pointer to get the location of the pointer, and this function only supports transforms on SVG elements because they implement element.getScreenCTM. HTML elements may support similar functionality in the future if the GeometryUtils specification is implemented by browsers; this provides element.convertPointFromNode. Unfortunately, it’s not easy to polyfill the GeometryUtils specification, and I have no plans to do so in D3.