Jump to content


How to control a svg from outside AND drag it

Recommended Posts

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!


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

Link to comment
Share on other sites

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.



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.