Loading SVG Externally and changing TweenMax.selector

[Amplus 0 Likes (Newbie)]

Hi,

I am loading my SVG file externally in an object tag because I wish to use gzip compression for my SVG. Because my SVG is now loaded separately, I can not select the elements inside the SVG with the default Greensock selector.
 

https://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?do=findComment&comment=45132

I have tried this solution, but I don't wish to wrap

doc.getElementById('')

 

around all of my selectors instead of the default Greensock ' ' selector.

 

Is there a way to modify the TweenMax.selector so my selectors will be referencing that document?

Thank you.

 

 

[GreenSock 8,117 Likes (Superhero)]

I don't think the browser will allow you to reference things inside the externally-loaded SVG with JavaScript for security reasons. You might want to consider injecting it into the DOM instead. 

[omarel 20 Likes (Newbie)]

@Amplus yeah unfortunately as mentioned above even CSS styling is not possible on an embedded SVG object. 

 

I know you're feeling because svgs can get so big and ugly they're hard to handle alone let alone inside another document. 

 

But the styling has to be with the SVG content itself not the object. 

 

You can do things like embed the SVG html itself with different techniques which can make it easier....For example in server side PHP you can do an include which brings the SVG content with one line and then you can work with the SVG in a separate file. 

 

As mentioned above perhaps there are similar scenarios in JavaScript by keeping the files separately and somehow getting the actual SVG content into the DOM but I'm not sure what drawbacks that can include as well.