+1

Is it possible to animate SVG path using html?

https://code.sololearn.com/WX53R0uJ0XCp/?ref=app I want this path to get animated. Can i use <animate> tag like i use in other svg tags. If so what should i set the attributeName as? (I don't know css so please don't include css)

3/29/2020 2:48:23 PM

Srinath

11 Answers

New Answer

+1

🤔 Gordon i don't get it

+1

https://code.sololearn.com/W3HjloEYjDrF/?ref=app

+1

Gordon please explain strokedashoffset and stroke dash array 😖

+1

Wait i don't get why you set the stroke-dasharray value as 285 285,does this signify the x-y coordinates?

+1

You may find answer in https://codepen.io/AliKlein/pen/epMaLM, wherin interalia, how to do with html, also has been elucidated.

+1

Yes, It can be animated eg, Let, You made a dragon using path. in animatin : it will show how you drew it. here you go for awesomeness: https://css-tricks.com/svg-path-syntax-illustrated-guide/ https://css-tricks.com/svg-line-animation-works/

+1

285 is path length, i got it by a stupid but effective method : trial and error

+1

EX:- https://code.sololearn.com/W0txWg4obC59/?ref=app this code help to animate svg

0

strokedashoffset

0

stroke-dasharray is, instead of whole path being solid, it becomes dashed according to your array. stroke-dashoffset is to adjust the beginning of the dashes. This is copied from Mozilla Doc: https://code.sololearn.com/WtrhY7A9p9LJ/?ref=app https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset