How to control a svg from outside AND drag it

[jaswa]

Hi GSAP brothers,

Thanks to Draggable, I can make a svg draggable within the bounderies of  its frame. That is to say, if I use : img id="SVGmap" src="map.svg”.

But when I use javascript to get inside the svg to control some elements, I get an error.

If I use: object id="SVGmap" data="map.svg" type="image/svg+xml”, the javascript to control from outside works, but I cannot drag the svg anymore.

I made a codepen:

Unfortunately the javascript does not work with an absolute link as I have to use here( why not?), but when the svg is on the same server, it works…

Does anybody know how to drag AND control the svg from the outside?

Thanks in advance for your answer!

jaswa

See the Pen NrNorL by jaswa (@jaswa) on CodePen

[Jonathan]

Hello jaswa,

 

When I tested your codepen example above it worked in latest Firefox and Chrome.

 

What your dealing with is probably the same-origin policy

 

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

 

[jaswa]

Thanks for your answer, Jonathan. Yes, you can drag the svg. But when I remove the comment from the <object> and place the comment around the <img>, and I also remove the comment from the js, then the textbutton will work (but not with the remote svg, as you pointed out) but there is no more dragging the svg with <object>.

 

I should like to learn how to control parts of the extern svg AND drag the svg within its container.

 

jaswa