Jump to content
GreenSock

iwas@thestartofitall.com

drawSVG not working in I.E.

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

  • Like 5
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

:)

  • Like 4
Link to comment
Share on other sites

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. 

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.
×