Jump to content


SVG Query Selector Feature Request

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

One really nice way to clean up your HTML is to get rid of inline SVGs and opt of object tags like this:

<object id="mySVG" type="image/svg+xml" data="images/PrettyArt.svg"></object>

The problem with this, is that it is technically a separate document. So the following doesn't work...


It would just fail to animate, and worse, it would fail silently so I had no clue why it was failing!



To make this easier to handle, it might be nice to either have some sort of logging if it doesn't find the queried object. OR the ability to either include a specific target document to query.


One way to achieve this, would be to "register" the SVG document with TweenMax. Something like this:


In this case, TweenMax would query the current document for "#mySVG", it would find the object tag and include this document to also traverse if no objects were found in the root document.


Obviously, this would work great for including one document, but multiple documents per page could be used. And that would muddy up the results of the query selector. So maybe another strategy should be used instead. What if you could force which document you want to select from... for example what if you could add a fourth/optional argument? Like this:


This would allow you to optionally include another document or a list of documents to query.

Link to comment
Share on other sites

Hi ElliotGeno :)


why you don't load svg content via ajax !

Link to comment
Share on other sites

So you are suggesting loading the svg and appending it to the document?

Link to comment
Share on other sites

Yep , that's super clean as you want and you can completely access / tween to SVG child elements .

Link to comment
Share on other sites

I am looking into this option... I saw possibly a neat way to leave it as an object tag but then replace the object tag with the svg. That might be even better.

Link to comment
Share on other sites

hmmm ok , try this and don't forget to use a local server for test in your pc : 


var svgObject = document.getElementById("svgObject") ,
    svgDoc = svgObject.contentDocument ,
    svgChild = svgDoc.getElementById("svgChild");
  • Like 1
Link to comment
Share on other sites

Hi Elliot,


Thanks for the suggestion.


We are doing are best to keep GSAP laser-focused on animation. When it comes to event systems, selector engines, loading etc we just don't have the resources to spread ourselves that thin. 


I agree that inline SVGs can become an unruly mess. I if you are doing a lot with SVG you might want to look into https://github.com/iconic/SVGInjector Seems they figured out all the important stuff already and it makes for a clean workflow. 


And just so you know, GSAP has really no selector engine capabilities at all. It never traverses the DOM looking for anything. All selector strings get passed off to one of the following


  • jQuery if detected
  • whatever $ might be
  • whatever you may choose to define through TweenLite.selector = whateverEngine
  • document.querySelectorAll() // if available
  • document.getElementById()

So if those guys can't find it, neither can we.


Again, we appreciate all suggestions and if there is something we can possibly do regarding SVG, we definitely want to know.


We just launched 1.17.0 and a mega SVG resource page like 10 seconds ago. Check it out: http://greensock.com/svg-tips

Check out the section on smoothOrigin, I think you will dig it. 





  • Like 2
Link to comment
Share on other sites

Hi Elliiot,


You should check out this thread about loading external SVG files. AJAX is definitely the way to go, and jQuery can really help simplify this process using the load method. This method automatically appends the data for you, and it will also let you select fragments so you don't have to inject the whole file. Here's a demo for you to play around with. Each SVG element is loaded and appended in a slightly different way. 



  • Like 2
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.