[accessing svg paths in external file]

Here's a couple of other variations using jQuery.

 

Easiest way to load and inject a single SVG. Just make sure the SVG element has the xmlns="http://www.w3.org/2000/svg" attribute on it.

http://plnkr.co/edit/5l2al3EPl9HIK2FQgO2C?p=preview

 

Load and inject multiple SVGs.

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

 

Oh yes, thats actually much easier than the .get() method! I tried to combine this with ScrollMagic to trigger a GSAP animation once a certain container is in the middle of the view port but it didn't work. With the .load() method I got it working...

 

Was a long way for me because it is the first GSAP animation I made!

 

Here is the result:

 

Link was deleted

 

Thanks again for pointing me into the right direction!

[Problems integrating animated SVG in WordPress]

For others that maybe struggle with the same problem I've found a solution by this method here:

 

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

 

The inline svg gets injected into the site with ajax...

 

Worked like charm. Here is the thread about it:

 

http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/

[accessing svg paths in external file]

Hi Scribble,

 

The SVG inside the <use> tags won't show up in your CodePen because the file is on another domain and you aren't referencing it (#left-hand).

 

<svg class="left-hand">
  <use xlink:href="http://my-server.com/left-hands.svg#left-hand"></use>
</svg>

However, using <use> might not be the best solution if you are trying to create SVG animations. First, IE does not support it, although there are ways around this. Second, the SVG is encapsulated so you won't be able to directly select your shapes/paths.

 

// Won't work with <use>
var hand = $("#left-hand-palm");

Diaco did a good job of showing us how to embed and reference an SVG. However, an embedded SVG is encapsulated inside an external document, so things like your CSS styles won't crossover into the SVG's document. 

 

I like to load external SVGs via Ajax, and then inject them into the page. Doing this will allow you to interact with the SVG just like an inline SVG. No need to modify your code!

 

Here's a demo of how to display an SVG using the ajax, object, use, and inline approaches. Notice how only the ajax version works like the inline version.

 

Plunker URL: http://plnkr.co/edit/LneUEK?p=preview

 

 

This method worked like charm for me on my wordpress site – thanks! ^^

 

I have a really long svg with more than 1000 lines that some how broke by using it inline in wordpress...

[Problems integrating animated SVG in WordPress]

Thanks for the advices Carl! I will read the resources you posted...

[Problems integrating animated SVG in WordPress]

Hi there,

 

I just started to work with GSAP and I made my first animated SVG. I developed everything local and now I wanted to integrate it in my WordPress site.

 

The inline SVG has round about 1000 lines and wordpess some how struggles with this much lines. The result is that the svg looks broken and parts of it are missing. So I integrated the svg with <object></object> now it looks proper.

 

I also enqueued all scripts but the animation is just not starting. In the console I can't see any errors related to this.

 

Any of you more experienced guys may have a look at my work? I hope you can see what I did wrong on a glance!

 

Here is the link

 

 

Some background information:

 

I use a caching plugin and a CDN but allready tried it without caching and CDN... no result.

 

Thanks in advance!