653762 - SVG stroke wrong for shapes with big stroke-width

Status: NEW

(Core :: SVG, defect)

Description

[Dr. Olaf Hoffmann]

User-Agent:       Mozilla/5.0 (X11; Linux i686; rv:6.0a1) Gecko/20110429 Firefox/6.0a1
Build Identifier: Mozilla/5.0 (X11; Linux i686; rv:6.0a1) Gecko/20110429 Firefox/6.0a1

If the stroke-width for the stroke of circle and ellipse gets large (around the
diameter), wrong presentation of the stroke-dasharray appears. the inner part of the stroke becomes frayed.

Animated samples for circle and ellipse:
http://hoffmann.bplaced.net/mozilla/strokedasharray05a.svg
http://hoffmann.bplaced.net/mozilla/strokedasharray06a.svg
After 50% of the shape is stroked, parts of an underlying red object appears, that should be covered, if the stroke would be correct -this indicates 
for the circle the missing parts and for ellipse at least parts of the missing
areas in red.

Reproducible: Always

Steps to Reproduce:
1. Try the given examples


Actual Results:  
The inner part of the stroke becomes frayed.


Expected Results:  
The stroke should be continuous around the given shape, no such frayed artifacts.
For the circle for example the outline of the inner part should be a circular
arc as well. The outline of the inner part of the ellipse is slightly more 
difficult to describe, I think it is not exactly an elliptical arc, but a similar
shape.

Different viewers have different problems with such a big stroke-width for circle and ellipse, resulting in quite 'interesting' presentations or even crashes.
Maybe there is no viewer currently providing a useful presentation of this,
Gecko is however close to correct, just the fringes have to be connected to
a smooth outline. For example Opera has a smooth outline, but it produces a 
surprising hole in the middle - no guide either.

I think, for arbitrary shapes with loops smaller than the stroke-width there are
no such big problems, are strokes of circles and ellipses are calculated differently?

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: static testcase

Confirmed.

Here's a reduced-ish static testcase.

The blue in this testcase is the (very wide) stroke for the gray circle.  The painted blue is one continuous "dash" in the stroke-dasharray (followed by enough empty space to make it back around the circle), so as Dr. Hoffman suggests, there's no reason it should be "frayed" on the inside edge.

I wonder if this affects our canvas impl, too (in which case it'd likely be a cairo bug)?

Comment 2

[Dr. Olaf Hoffmann]

I created some more examples, and indeed I'm wrong, it is not specific for
ellipse and circle, it appears for rect or arbitrary path data as well:

rectangle:
http://hoffmann.bplaced.net/mozilla/strokedasharrayRect01.svg

cubic path:
http://hoffmann.bplaced.net/mozilla/strokedasharrayPath02.svg

and this one can give a hint, what is maybe the wrong assumption, that results
in the frayed appearance:
http://hoffmann.bplaced.net/mozilla/strokedasharrayPath01.svg
A blue approximation of a circle is painted within 10s with repetition.
For the first turn the stroke-width is chosen in a way, that the inner
outline of the stroke is slightly larger than the fill outline.
For the next turn the stroke-width is chosen slightly smaller.
This is followed by the initial stroke-width and so on.

The fraying effect appears mainly for the first case, this indicates,
that the amount of stroke painted for the inner part
per 'frame' is determined to be approximately the same amount than the
path length of the initial shape fragment, while for the outer part it is already
assumed, that it can be larger than this, what seems to be assumed to
be not possible for the inner part of the curvature, what is obviously
a wrong assumption.

Comment 3

[Dr. Olaf Hoffmann]

The effect seems to appear in general for the stroke, if the curvature is only
large enough for the given stroke-width:

http://hoffmann.bplaced.net/mozilla/strokePath03.svg

Comment 4

[John Eke]

I am seeing this issue as well in:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:21.0) Gecko/20100101 Firefox/21.0

Creating a small ellipse with a large stroke width leads to this weird effect

Reproducible: Always

See jsFiddle here: http://jsfiddle.net/MyBsC/4/

Comment 5

[John Eke]

I should mention it happens in svg and canvas

Comment 6

[Jonathan Watt [:jwatt]]

Attachment: testcase from bug 510177

Comment 7

[Jonathan Watt [:jwatt]]

Comment on attachment 8499405 [details]
testcase from bug 510177

This one fails on Windows.

Comment 9

[monfera.robert]

Thanks Robert for identifying 1633024 as a duplicate of this. Though I'm slightly concerned as it's apparently a 9 year old bug report that's marked as New, Unassigned, Priority not set :-D