search

maxwellito / vivus

JavaScript library to make drawing animation on SVG
MIT License
15.19k stars 1.13k forks source link

Stroke does not complete on sharp corner #223

Open brycekunkel opened 5 years ago

brycekunkel commented 5 years ago

Vivus version: Vivus Instant & 0.4.4 Browser: Chrome Steps to reproduce it: Use an SVG with sharp angle (produced from Illustrator) in Vivus

Reproduced Issue: https://jsfiddle.net/2t1kb9yr/ »Note the top left corner of the left-most part of the "U", and you'll see the break in the corner.

I might be just missing something, but I couldn't find anywhere how to make a more compliant SVG or a setting to pass into Vivus. Thank you for making something so awesome for everyone to use.

Screen Shot 2019-08-26 at 4 50 58 PM

maxwellito commented 5 years ago

Hi @brycekunkel, Sorry about the delay, I was AFK for a little while. Thanks for reporting the bug, sadly it's a common problem on many browsers where the line don't close even if it should be.

Screenshot 2019-09-08 at 13 03 14 Here is when the path is not complete.

Screenshot 2019-09-08 at 13 03 28 Here is when the path should be more than complete (knowing that the 'length' of this path is 1863px)

However to fix the final view, I would recommend you to use the constructor option selfDestroy to remove all stroke-dash property after the end of the animation. Which will remove all these potential artifacts.

I hope this helps :)

Shanti9 commented 2 years ago

I also noticed this bug! What I have found out is not complete solution but can improve visually and in most of my applications it works good enough. You only have to apply additional CSS rule on all yours CSS stroke classes: stroke-linecap: round; That means that last connecting corner will not be square but round, but it will be connected! Here is an example of that, where you can see closing cap is round, but not really noticeable unless you really look at it, especially not on smaller sizes: https://vindu.agency/wp-content/uploads/2020/05/vindu-logo-color-animated.svg It works for Firefox, Chrome, Edge...