DrawSVG Plugin : make layers visible or invisible in Object Tag

[jstafford]

Hi, I was hoping to use the gsap DrawSVG plugin to make direct reference to ids used in my svg layers to make them visible and invisible. I use the object tage, i.e. no inline svg tag in my html to reference the svg. I know of other 3rd party apis that allow you to interact with the svg, Does GSAP's DrawSVG plugin support anything like this?

[Diaco]

Hi jstafford 

 

Pls check this thread : http://greensock.com/forums/topic/12321-non-inline-svg-and-control-with-gsap/

[jstafford]

Please see codepen below. I was trying to show that the svg was external file reference in the object tag, but I am not sure this is the problem.

 

 

<object type="image/svg+xml" data="/quickloanconnect/resources/img/svg-layer-test.svg" id="svg">

 

</object>

 

 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

viewBox="0 0 91.333 70.667" enable-background="new 0 0 91.333 70.667" xml:space="preserve">

<g id="Layer_1">

<text transform="matrix(1 0 0 1 -4.333 68.6665)" font-family="'TimesNewRomanPS-BoldMT'" font-size="100" id="first_date">13</text>

</g>

<g id="Layer_2">

<text transform="matrix(1 0 0 1 -4.333 68.6665)" font-family="'TimesNewRomanPS-BoldMT'" font-size="100">15</text>

</g>

</svg>

 

var svgObject = document.getElementById("svg");

var svgDoc = svgObject.contentDocument;

 

 

var layer1 = svgDoc.getElementById("first_date");//returns null when I select for id=first_date or id=Layer_1 from my svg? Why?  

 

tl.set(layer1, {autoAlpha:0});

 

 

 

[jstafford]

Diaco, I apologize that this is kind of an svg question, not GSAP, but do you know why I am returning null from the line svgDoc.getElementById("first_date") and svgDoc.getElementById("Layer_1").

[jstafford]

Here is a codepen that better illustrates this problem. 

See the Pen avJjoR by jstafford (@jstafford) on CodePen

 . I think the alert is not firing because layer1 is null here, but it is not showing errors?

[Diaco]

pls check and follow Carl's answer / example here : http://greensock.com/forums/topic/12321-non-inline-svg-and-control-with-gsap/?p=51783

 

as Carl mentioned :

 

unfortunately when using <object> you must load the svg from the same domain and this impossible to do on CodePen

 

 

btw this's a way to access obj tag contents , not inline svg !

 

another thing i see in your demo : pls define tl as Timeline or use TweenLite/Max .set() instead of tl .

 

don't forget to Make sure obj tag has loaded before . ( you can use window.onload function )

[jstafford]

Thanks Diaco. I know referencing external svg files is done by many instead of inline svg. Perhaps,my stack overflow question better illustrates my problem. This isn't really a GSAP question but any insight would be greatly appreciated. http://stackoverflow.com/questions/32928985/cant-getelementbyid-within-an-external-svg-file-using-object-tag