Panning with rotated X-AXIS SVG

[tmeghe]

Hi, Just a quick question which I didn't found any answer. I'm using the library with Angular 7 and it works well. However, for my need, the SVG I'm working on has a scale(1,-1) transform (equivalent to a rotateX(180deg)) When panning, everything is good on the X-AXIS but the panning behavior is inverted on the Y-AXIS. Is there a way to make it pan the right way ? (maybe intercepting the mouse coordinates and inverting them ?) Any help appreciated, thanks a lot Thomas

[bumbu]

You should be able to do that by using beforePan callback. You can read more about it on homepage https://github.com/ariutta/svg-pan-zoom .

[tmeghe]

Edit (previous answer was wrong) : Thanks for the answer, indeed I can access to pan values but panning is done through mouse so if I modify them I will loose the smooth panning translation ?

[bumbu]

Using this callback should not degrade performance of the panning (unless there CPU heavy computations in it, which I suppose there're not). If you can paste a jsfiddle - it may help understand the issue better. Few other alternatives I can think of:

• Before loading your SVG, modify it so to have scale(1, 1). Maybe an easy solution is to wrap everything in another element with scale(1, -1).
• Use customEventsHandler (there're 2 demos on home page) - you'll have to write the behaviour of panning by yourself, but this way you'll have full control
• Fork the library, add an option to it to support inverse axis, and compile.

Hopefully it helps

[shadowjustice]

I have a pull request #370 which is correct to add the rotate option to svg pan zoom. Then you can set the rotation. And as far as I know no effect on panning.