SVG Query Selector Feature Request

[ElliotGeno]

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...

TweenMax.to("#myObject",.5,{opacity:1});

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:

TweenMax.register("#mySVG");

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:

TweenMax.to("#myObject",.5,{opacity:0},"#mySVG");

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

[Diaco]

Hi ElliotGeno 

 

why you don't load svg content via ajax !

[ElliotGeno]

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

[Diaco]

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

[ElliotGeno]

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.

[Diaco]

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");

[Carl]

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. 

 

Best,

 

Carl

[OSUblake]

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. 

 

http://plnkr.co/edit/nQL8NNSsNaH3Secf1Bnx?p=preview