Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

DrawSVG Plugin : make layers visible or invisible in Object Tag

Recommended Posts

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?

Link to comment
Share on other sites

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">
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 id="Layer_2">
<text transform="matrix(1 0 0 1 -4.333 68.6665)" font-family="'TimesNewRomanPS-BoldMT'" font-size="100">15</text>
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});



Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 )
  • Like 1
Link to comment
Share on other sites

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

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.