DrawSVG + SVG <symbol>

[flysi3000]

Hey - I was reading an article by Sara Soueidan about grouping and reusing SVGs, so I thought I'd try implementing that on an animation I had already completed. Here's the original, using individual <line> elements:

 

The new version with a reused <symbol> is here: 

See the Pen YwKedE by flysi3000 (@flysi3000) on CodePen

.

 

As you can see, the svg lines aren't rendering as expected at all. Wondering what I'm doing wrong? SVGs are still kind of mysterious to me, so any help would be greatly appreciated!

See the Pen XmaqBQ by flysi3000 (@flysi3000) on CodePen

[PointC]

Hi flysi3000 ;

 

I think this post can answer your questions about animating symbols.

 

http://greensock.com/forums/topic/12232-svg-symbols-rendering-issues-in-chrome-and-ie-on-windows-7-sp1-x64/