draw transition creates visual artifact at the end of a path

[hamilton]

Describe the bug
In some cases, the draw transition creates in some cases a small flickering point at the end of a path. The SVG I based this off of was exported from Affinity Designer (an Illustrator competitor), introducing a number of matrix transforms into the export.

To Reproduce
https://svelte.dev/repl/d034659637054c4588960fd037e40d1a?version=3.19.2

Information about your Svelte project:

• this appears in both Firefox 74 and Chrome 80
• this appears in Svelte 3.19.2

Severity
I was experimenting w/ this approach for a work project. It's not a dealbreaker per se, but I might be disinclined to attempt this particular approach – exporting something from Illustrator and animating it with Svelte – in the future. This all said, I recognize this might simply be an artifact from the export that I haven't fully explored. The draw transition works fantastically when I use it in data visualization / in code-generated stuff.

[antony]

I was trying to recreate this for a much simpler use-case to determine if it was your export which did something wrong, and feel like perhaps it is. Is there a way to tweak your SVG?

If I use a simple line: https://svelte.dev/repl/2ed53692a3054a84a5b5bf00a81034d1?version=3.19.2

It doesn't occur.

[LBiddiscombe]

Hi, I had the same issue this evening and found I got the artefact if I add a stroke-linecap: round (or square). I’ll link a repl with an example and how I worked around it in the morning. I think the issue may be in the getLength called in the draw method not accounting for the additional length of the caps.

[hamilton]

Thanks for the response @antony – I had forgotten about this issue! Looking at my old repl, it looks like stroke-linecap: round; is the culprit, as @LBiddiscombe notes. Removing it from the repl seems to fix the issue. The draw transition in Svelte is a pretty standard method using stroke-dasharray. There may be some adjustment for the stroke-linecap that involves considering the stroke-width to buffer out the edges a bit.

[LBiddiscombe]

Hi, here is a REPL https://svelte.dev/repl/a5584197164440fe9bc864dde19b0a99?version=3.24.1 showing both the standard draw method with the flicker, and one without, where I add the stroke-width to the len if it has a stroke-linecap.

[benmccann]

I'm reopening this since there's an associated PR #6195

[MitchellDuhe]

I was able to do a workaround where I took the svelte draw function and changed the line
const len = node.getTotalLength() -----> const len = node.getTotalLength()+ 1
it may not be perfect but it removed my artifact.

[wjtje]

@MitchellDuhe That will work in your specific situation, a more general solution would be to change that line to the following lines:

const has_end_caps = getComputedStyle(node).strokeLinecap !== 'butt';
const cap_size = has_end_caps ? parseInt(getComputedStyle(node).strokeWidth) : 0;
const len = node.getTotalLength() + cap_size;

This will calculate the size of the caps and add it to the total length.

[Conduitry]

This has been fixed in 3.42.5 - https://svelte.dev/repl/d034659637054c4588960fd037e40d1a?version=3.42.5

Thank you for the suggested fix @LBiddiscombe and thank you for the PR @wjtje - sorry it took so long to get this in!