Jump to content
Search Community

Animating stroke-dasharray

JamesGrubb test
Moderator Tag

Recommended Posts

Just FYI. You can make this happen without DrawSVG by getting the total length, but DrawSVG solves a lot of browser inconsistencies and bugs for you.

 

  1. Calling <path>.getTotalLength() in IE locks the repaint area of the stroke to whatever its current dimensions are on that frame/tick.
  2. Firefox will throw an error if you try calling getBBox() on an element that isn't visible (which you may need to do to calculate the length for normal shape elements like <rect>, <line>, etc. - DrawSVGPlugin works on all those shapes so you don't have to use a <path>)
  3. Microsoft Edge has a bug that causes it not to redraw the path correctly if the stroke-linecap is anything other than "butt" (like "round") and it doesn't match the stroke-linejoin.
  4. Firefox doesn't always return an accurate getTotalLength(), causing things to be a bit short at times.
  5. Some browsers render artifacts if dash is 0.
  6. When the element has vector-effect="non-scaling-stroke" and the SVG is resized (like on a window resize), it actually changes the length of the stroke! DrawSVGPlugin can automatically adjust.
  7. A bug in Safari causes strokes with rounded ends to still show initially when they shouldn't.
  8. You can't getTotalLength() on other shapes besides a <path> (like a <rect>, <circle>, <line>, etc.
  9. IE and Firefox have some bugs that cause <path>.getTotalLength() not to work properly.

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

  • 5 months later...
On 8/31/2020 at 6:21 PM, PointC said:

I'd use DrawSVG to make your life easier.

 

 

 

I wouldn't recommend the little set pathLength to 1 trick as pathLength is deprecated.

https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/pathLength

 

Happy tweening.

:)

 

@PointC Just an FYI to you and all the other memebers. the pathLength attribute for svg elements has not been deprecated, the article you linked to is the javascript API. Here's the MDN page:

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

  • Like 1
  • Thanks 1
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...