drawSVG not working in I.E.

[iwas@thestartofitall.com]

I have been working on this project for the past few months where I use drawSVG to draw an SVG. Everything seems to work as it should in Chrome and Safari but it won't draw the lines in IE. I pulled the code from my project and put together this pen. If you run it in Chrome you will see the lines draw on the screen. If you run the pen in IE the shape just appears. I opened up the javascript console in IE and I notice it is throwing an error, SCRIPT65535: Unexpected call to method or property access. DrawSVGPlugin.min.js (13,1184). Anyone have any ideas as to what I am doing wrong?

See the Pen jLQLaE by robertthompson (@robertthompson) on CodePen

[PointC]

Hi @iwas@thestartofitall.com

 

Welcome to the forum.

 

There are some strange paths in your SVG. They all have a class of 'a_severity' and look like coordinates for line elements. Here's one:

<path class="a_severity" x1="613" y1="408" x2="590" y2="399"/>

 

Once I removed those from the SVG, it seemed to work correctly in IE11. I'm really not sure why the other browsers didn't get cranky about it? Maybe the other browsers just ignored those for some reason, but removing those odd paths did fix it for me in IE. IE is more of a fussy pants with everything related to SVGs.

 

Hopefully that helps. Happy tweening.

[iwas@thestartofitall.com]

Thanks so much, I'll check it out. I'll see if I can remove them and still have the design render the way the Art Director intended it to. 

[PointC]

If they're part of the design, you don't have to remove them. You'd just need to change them to <line> elements rather than <path> elements. DrawSVG can animate the stroke of lines just fine. You just need to give them a stroke and width like the paths and then target the paths and lines together in the tween like this:

 

TweenMax.to('#Severity_SVG path, #Severity_SVG line', 3, {drawSVG:"100%", delay:2});

 

Hopefully that helps. Happy tweening.

[Jonathan]

Hello @iwas@thestartofitall.com and Welcome to the GreenSock Forum!

 

The DrawSVGPlugin allows you to animate the stroke of the following SVG elements:

• <path>
• <line>
• <polyline>
• <polygon>
• <rect>,
• <ellipse> 

https://greensock.com/drawSVG

 

Hope this helps!

[iwas@thestartofitall.com]

Thanks! I removed the strange paths and the svg look the same. Maybe it was code that got generated by the 3D program used to export the SVG. Thanks again for your help.