1169258 - SVG linecaps are drawn when path length coincides with dasharray gap

Status: UNCONFIRMED

(Core :: SVG, defect)

Description

[Paul LeBeau]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0
Build ID: 20150513174244

Steps to reproduce:

If you have:

* a path with non-butt endcaps, and
* that path exactly coincides with the gap portion of a dasharray

The path will not be drawn (as expected), but the endcaps will.  This leaves the render showing just dots (for round endcaps) or squares (for square endcaps) at the path end points.

This is not a rare situation since this technique is commonly used for animating the drawing of paths.

The following example shows two lines.  The top one demonstrates the bug.  In the lower line I have adjusted the dasharray and dashoffset os the line falls inside a slightly increased gap.

<svg width="400" height="400">
    
    <path d="M 50 150 L 350 150" stroke="tomato"
          stroke-width="40" />

    <!-- dasharray same length as line -->
    <path d="M 50 150 L 350 150" stroke="black"
          stroke-width="40" stroke-linecap="round" stroke-opacity="0.7"
          stroke-dasharray="300 300" stroke-dashoffset="300" />

    <path d="M 50 250 L 350 250" stroke="tomato"
          stroke-width="40" />

    <!-- dasharray gap slightly longer than line -->
    <path d="M 50 250 L 350 250" stroke="black"
          stroke-width="40" stroke-linecap="round"
          stroke-dasharray="300 302" stroke-dashoffset="301" />
    
</svg>

http://jsfiddle.net/atc40vxf/2/


Example stack overflow question showing real world occurrence:

http://stackoverflow.com/questions/30503618/animated-svg-cross-browser-compatibility/30507304#30507304


Actual results:

End caps are drawn when they (probably) shouldn't be.


Expected results:

The end caps should not be.

Comment 1

[Robert Longson [:longsonr]]

Any chance of a screenshot since this doesn't seem to happen on my Mac.

Comment 2

[Paul LeBeau]

Attachment: Screenshot on Windows 7 x64 FF 38.0.1

Sure. Here you go.

Comment 3

[Paul LeBeau]

Sorry. Forgot to fill out platform.