Jump to content
Search Community

SVG animations

icraig6666 test
Moderator Tag

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

Hi Everyone,

 

Just dipping my toe into DrawSVG and I'm picking up on a project a previous developer has worked on.

Just got a couple of questions which I hope someone can help with.

 

In the html there is a long string of numbers, for example:

<path style="fill:#FFFFFF;" d="M-357.8,745.5v3.8c0,2,4.8,4.1,11.3,4.1s11.3-2.2,11.3-4.1v-3.8c-2.3,1.7-6.4,2.8-11.3,2.8
                                S-355.5,747.2-357.8,745.5z"
/>

 

Where does this get generated from? What is it doing? All the paths in the animation have these strings - some are very long.

 

Any help/clarification very gratefully recieved...!

 

 

Link to comment
Share on other sites

Hi icraig6666  :)

 

Welcome to the forums. 

 

Most of the time you won't need to worry about that string. It will be generated upon export by your vector software. Rather than go into a long explanation here, I think this link can help you:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

 

Also, the drawSVG plugin will need a stroke on the path to work its magic. 

 

Hopefully that helps a little bit.

 

Happy tweening and welcome aboard.

:)

  • Like 3
Link to comment
Share on other sites

Just have to say that I got a laugh out of your question. I remember when I first heard about SVG. "It's really easy to work with and is just like HTML." I then opened an SVG file and was horrified by what I saw. A string of numbers that filled my entire screen. Well I've never seen any HTML that looked like that!

 

Like PointC said, you don't need to worry about it if the SVG has already been created for you. But there's no harm in learning how it works. It is human readable, and makes more sense when it's formatted better...

<path d="M100,50 L100,150 L300,150" /> 

A letter is a drawing command, and the numbers are usually pairs of x,y coordinates. So that will draw a line between those 3 set of coordinates.

See the Pen ecaa4cc77a6bca18dbba8d268c7d7185 by osublake (@osublake) on CodePen

 

I just came across a pretty interesting demo. You can see the coordinates being updated as you move stuff around.

See the Pen EKLNvZ by thebabydino (@thebabydino) on CodePen

 

If you want to learn more about SVG, here's a good place to get started. 

http://tutorials.jenkov.com/svg/path-element.html

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