Synchronized demo is not working

[leoheck]

Hey, can you check if this example is working for you? I was not able to make it work.

It loads 2 images, but I cannot pan and zoom them.

https://github.com/bumbu/svg-pan-zoom/blob/master/demo/sinchronized.html

[leoheck]

I am seeing this, and I have not Idea if I can fix this from my side.

[wassfila]

I run the demo sinchronized.html without issues, I can pan one svg and the other Tiger follows, and no errors on the console (other than the favicon) I tested on Chrome Version 90.0.4430.93 the svg-pan-zoom commit 588f3b81260223e2

[leoheck]

Wierd, are you sure it is working? I tested it, I also tested it with my own HTML. No one works. Actually having this enabled makes svg-pan-zoom irresponsible. Then, maybe this is related to the version in use. This script is referring to the version in master here. I was updating it to use a version found online.

Testing here again. Still the same issue, now I am using the version that is in the master.

Using the same version of the chrome 90.0.4430.93 (Official Build) (64-bit)

What is this commit? https://github.com/bumbu/svg-pan-zoom/commit/588f3b81260223e2669beb96611590e64ef4c0c9 I am using it, the same result.

[leoheck]

It doesn't work on firefox too.

[wassfila]

That commit was the one I had when I cloned the repo the first time nothing special, but I just tested Today :

• clone this repo
• opened repo root on VSCode

• selected the file sinchronized.html

  • Clicked "Go Live", I'm using "Live server" plugin And it was running fine, no errors

  Which webserver are you using ?

[leoheck]

Thanks for sharing the steps you are doing. I am not using any server. I am just launching the page from the repository. Most of the features were working fine. Should I use a server?

[wassfila]

Yes, although chrome and many browsers do run javascript code inside pages, there is absolutely no guarantees on the behavior regarding functions that require fetch or others dependencies from neighboring files. For security reasons, when dropping a file on your browser, it is not allowed to access the neighboring files. So testing behavior of web pages or web apps can only be reliable if run from a server. Today a webserver is as easy as a vscode plugin, a python module or a node module, although those even are development servers not intended for production. Production servers are like Apache or Nginx. But here I recommend simply the "Live server" from vs code, you can find plenty of videos how to use it if needed.

[leoheck]

Nice, this explanation makes sense. Launching and testing this with a python server. It works.

However, it is just moving horizontally. Does this happen to you too? Do you know how to make it move freely on both axes?

[wassfila]

Cool, yes, it moves horizontally for me as well, I did not look much into it, as I guess the demo was only to show case a restriction. If you would like to discuss topics that are not necessarily issues relevant to this ticket, then I offer support on my discord server for various topics around home automation and web programming, I'm learning web programming myself not an expert that's why discussions can help me learn too, here's an invite https://discord.gg/UjdzZ4SB

[qknight]

I got the same result using firefox on windows atm. In the svg-pan-zoom clone's demo directory only the inline demos work with:

file:///C:/Users/joschie/Desktop/svg-pan-zoom/demo as URL

If I open a webserver:

cd demo
python -m http.server 8000

And access them via:

localhost:embed.html 

All work. Inlining the svg is not an option and using a webserver to access this folder is none either. Just wanted to have an easy way to view a SVG with some controls but for now I think this library won't be able to.

Funny thing is, that the webbrowser can load the SVG and show it, the not inlined one, but It just can't access it via your library.

All work.