1402515 - Distance-along the-path computations with stroke-dasharray are neither correct nor not consistent when scaling

Status: RESOLVED WORKSFORME

(Core :: SVG, defect, P5)

Description

[ccprog]

Attachment: test case

If you define a stroke-dasharray on a long path that consists of Bezier curves, the position of the visible dashes can deviate from the values that would be expected from distance-along the path computations.

In the attached test case, the path (in red, shown on different scales) consists of 20 identical cubic bezier segments. The total length of the path is 20 times the length of one of these curves (seperate path in green). .getTotalLength() confirms this within a margin < 0.05 / ~4000.

If you define a stroke-dasharray with this single curve length for both dash and gap, the last drawn gap should still coincide with the control points of the path. (x values should coincide with the borders of the grey background) - All other dashes that make up the path are clipped for clarity.

The dash ends visibly differ from their expected positions. Note in the console log that the positions along the path computed with .getPointAtLength() state the correct positions.

The deviation seems to be different depending on how much the path is scaled. That does not say that scale(1) gives a correct result. The method with which the scaling is done (transform command, new viewport, setting the browser enlargement) makes no difference.

Setting the pathLength attribute or leaving it off has no effect.

This error does not happen for paths with line segments.

You can observe the results of this error also in this animation that uses dashes and gaps on a continuous path to form letters:

https://codepen.io/Zaku/pen/ALChE/

Play around with browser enlargement to see how the strokes shift.

Comment 1

[Firefox Bug Husbandry Bot]

https://wiki.mozilla.org/Bug_Triage/Projects/Bug_Handling/Bug_Husbandry#Move_fix-optionals

Comment 2

[Robert Longson [:longsonr]]

Seems OK now.