Jump to content
Search Community

Hello Team

Nisha Prasad test
Moderator Tag

Recommended Posts

As I am new to this Draw svg plugin so unable to work on required output. I have one svg file which should be drawn when user opens the page. Below are the 3 lines svg file. I want output like this :  ie how dotted lines are moving. But mine is not working. Is my svg file code is correct. Urgent help please.

line1.svg line2.svg line3.svg

See the Pen wmmmmK by PointC (@PointC) on CodePen

Link to comment
Share on other sites

I think there's some core fundamentals missing here. 

All the other examples are animating a stroke which is inside an SVG mask. Whereas you're targeting multiple circle elements.

 

Quote

DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG element - It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties.

 

The way you're attempting it isn't going to work - it's a bit like trying to follow a music tutorial to play a song, but you're using a banana instead of a guitar. It's not an error in the SVG, it's the wrong SVG markup entirely.

 


It's definitely hard to see what's going on with masks though as they're invisible, so that's a tricky place to start trying to understand drawSVG. I've taken the path out of the mask here so you can see what's happening.

Does that make it a bit more clear to you what's going on? 

See the Pen WNMGBJB?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 2
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.
×
×
  • Create New...