Jump to content
GreenSock

celli

non-inline SVG and control with GSAP

By celli, in GSAP. Views: 3,699

Recommended Posts

Posted

I am looking to maintain control of classes. IDs, and elements of an SVG through an imported or external SVG file with GSAP. The reason is that sometimes the SVG code gets so long, and I'd rather have it in a file outside of my main HTML file. It looks like maybe using the <object> tag can work, but I'm not sure:

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo <!-- fallback image in CSS -->
</object>
Link to comment
Share on other sites
  • Author
Posted

yes. Thanks! I'll give it a try.

Link to comment
Share on other sites
Posted

Hi celli  :)

 

pls try like this :

var svgObject = document.getElementById("svgObject") ,
svgDoc = svgObject.contentDocument ,

// select child elements like this :

svgChild = svgDoc.getElementById("svgChild"),
svgChild2 = svgDoc.querySelectorAll(".myClass");
  • Like 1
Link to comment
Share on other sites
Posted

Some of the code gurus around here may also have some more info about a way to make GSAP work with embedded SVGs.

 

For my 2 cents worth here - I'd leave the SVG inline to give you the greatest amount of control with the least amount of hassle. GSAP can then easily work with any of your IDs, groups and classes without any difficulty. Yes - sometimes the SVG code can get a bit long, but that's really more of a human problem (ugh - look at all that code!)  than a problem for the browser. Most text editors have a little twirl icon to hide blocks of code while you're working anyway so you don't have to scroll through it all the time. Of course, this is all just my opinion - YMMV.  :-)

 

Edit: yep Diaco already has code info for you. 

  • Like 3
Link to comment
Share on other sites
  • 3 weeks later...
  • Author
Posted

I finally got back around to trying to control the non-inline SVG with GSAP, and I didn't have any luck. Here is a codePen showing it. I tried an object tag and an img tag but both ways doesn't seem to let me access the svg element or child elements. 

See the Pen KdzXdx by celli (@celli) on CodePen

Link to comment
Share on other sites
Posted

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

 

I made a very simple demo here using Diaco's code: http://greensock.com/forums-support-files/svgObject/

 

Source:

 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>


<body>
<object type="image/svg+xml" data="greensock-logo.svg" class="logo" id="svgObject"></object>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>


function go(){
var svgObject = document.getElementById("svgObject"),
svgDoc = svgObject.contentDocument,


// select child elements like this :


svgChild = svgDoc.getElementById("rectangle")


TweenMax.to(svgChild, 1, {rotation:360, transformOrigin:"50% 50%", repeat:400});
}
//wait until object is loaded (lazy)
TweenLite.delayedCall(1, go);


</script>
</body>
</html>

Also I saw some other errors in your pen like:

 

You were passing the # into getElementById()

var svgObject = document.getElementById("#txt-design-script") //bad
var svgObject = document.getElementById("txt-design-script") // good

You didn't have an id on your <object>

  • Like 3
Link to comment
Share on other sites
Posted

I would second PointC's great advice! You could have it external but some browsers have issues including external SVG files, and then applying SVG filters, masks, and other SVG goodies. And by external I mean importing via a reference to an external SVG, like through an image tag or CSS background-image which has browser bugs. But if you meant just include external SVG as a snippet in the page,that is easy and can be done in various ways like PHP includes, or template fragments via ajax.

 

Object tags can have cross-domain security issues.. Carl beat me to the punch.. again ;)

 

Have the SVG in your HTML file like PointC advised is the way to go.

 

Here is W3C spec article on SVG and HTML, showing how they work together and what happens behind the scenes when your HTML page renders with SVG in it. Also when the browser will trigger the XML parser for use in your HTML document.

 

W3C SVG HTML Proposal: http://dev.w3.org/SVG/proposals/svg-html/svg-html-proposal.html

 

 

 

I hope this helps! :)

  • Like 3
Link to comment
Share on other sites
  • Author
Posted

That makes perfect sense. Thanks guys.

Link to comment
Share on other sites
Posted

I've shown how to use external SVG numerous times using ajax. There's nothing magical about it. It just an http request, like everything else loaded on your page.

 

With jQuery

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

 

And without

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

 

The other day @MindGamer brought a great idea about using SVG as JavaScript string variables. That way you don't even have to make an ajax call. Using string variables for content is very common approach in libraries like Angular. It's fast and the JavaScript file will be cached.

 

Check this out. Where's the SVG coming from?

See the Pen f9ad0aafc2fa585e60e4b9642ac716b3 by osublake (@osublake) on CodePen

 

Right here...

https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/svg-string.js

 

 

 

 

 

 

  • Like 6
Link to comment
Share on other sites
  • Author
Posted

wow, OSUblake. You are a master. I love this!

  • Like 1
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account