896248 - Rendering differences with Chrome/Opera when stroke-width is much larger than the element being stroked

Status: UNCONFIRMED

(Core :: SVG, defect)

Description

[panzan89]

Attachment: Source file and screenshots

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0 (Beta/Release)
Build ID: 20130618035212

Steps to reproduce:

I have written a simple SVG file to display a cirle:
***********************************************************************
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink"
 version="1.1" x="0" y="0" width="200" height="200">
<circle cx="100" cy="100" r="20" stroke="black" stroke-width="120" fill="red"/>
</svg>
***********************************************************************


Actual results:

However, Firefox 22 displays the SVG circle very differently with Chrome 19 and Opera 11 on Ubuntu 12.04 (see the attachment). IE has not been tested.


Expected results:

The stroke shouldn't override the filled zones. I'm not sure which one should be the expected result. Perhaps it is a bug of Chrome and Opera.

Comment 1

[Cameron McCormack (:heycam)]

Firefox Nightly (25) on Mac renders the same as your Chrome and Opera screen shots, i.e. showing the red circle in the middle.  Isn't the correct rendering what you are seeing, though?  The very wide stroke shape should look like a solid black circle of radius 80.

Comment 2

[Loic]

Attachment: circle.svg

Comment 3

[Loic]

I see the full black circle with FF22/25 on Win 7: http://i.imgur.com/DtDdwmc.jpg

Comment 4

[Loic]

IE9 displays the same rendering too.

Comment 5

[panzan89]

I also tested the following code:
*********************************************************************************************
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink"
 version="1.1" x="0" y="0" width="200" height="200">
<rect x="100" y="100" width="20" height="20" stroke="black" stroke-width="120" fill="red"/>
</svg>
*********************************************************************************************
It is strange that Firefox displays a red rect in the center surrounded by a white rect, while Chrome displays a full black rect, and Opera displays a red rect in the center surrounded by a white diamond.

Comment 6

[panzan89]

Attachment: Source file for SVG rect

Comment 7

[Loic]

I see a full black rectangle.

Comment 8

[Frank Wein [:mcsmurf]]

Maybe some Linux only rendering bug? Is there OS-specific rendering code for SVG images, not sure about that..

Comment 9

[Cameron McCormack (:heycam)]

It'll be Cairo's use of different platform backends that causes this different behaviour with very large stroke-width values.

Comment 10

[Loic]

For me, disabling HWA doesn't fix anything, still a black rect or circle.

Comment 11

[Ana Tudor]

This is still an issue today, at least on Windows and it causes trouble when trying to create things like pie charts or rays using strokes.

Live test https://codepen.io/thebabydino/pen/LrvaRZ?editors=1000

Screenshot of result in Chrome (expected) https://pbs.twimg.com/media/DhQdugpWAAARkb7.jpg

Screenshot of result in Firefox/ Edge https://pbs.twimg.com/media/DhQdugrXcAA99VK.jpg

Seems to become more obvious the more slices the pie we create this way has.

Live test #2 https://codepen.io/thebabydino/pen/QBXxmV?editors=1100

Screenshot of result in Chrome (expected) https://pbs.twimg.com/media/DkvPnt1W4AAtOqq.jpg

Screenshot of result in Firefox/ Edge https://pbs.twimg.com/media/DkvPntxXsAEI2KU.jpg

Comment 12

[aziesemer]

I don't have this issue with Firefox 61.0.2 (64-bit) for Mac OS

(In reply to Ana Tudor from comment #11)
> This is still an issue today, at least on Windows and it causes trouble when
> trying to create things like pie charts or rays using strokes.
> 
> Live test https://codepen.io/thebabydino/pen/LrvaRZ?editors=1000
> 
> Screenshot of result in Chrome (expected)
> https://pbs.twimg.com/media/DhQdugpWAAARkb7.jpg
> 
> Screenshot of result in Firefox/ Edge
> https://pbs.twimg.com/media/DhQdugrXcAA99VK.jpg
> 
> Seems to become more obvious the more slices the pie we create this way has.
> 
> Live test #2 https://codepen.io/thebabydino/pen/QBXxmV?editors=1100
> 
> Screenshot of result in Chrome (expected)
> https://pbs.twimg.com/media/DkvPnt1W4AAtOqq.jpg
> 
> Screenshot of result in Firefox/ Edge
> https://pbs.twimg.com/media/DkvPntxXsAEI2KU.jpg

Comment 14

[Morgan]

This is definitely still an issue on Windows with Firefox 71. The issue does go away if I disable hardware acceleration, but I can't really go telling my users to disable HWA on my site, so that's not really the greatest solution.

(In reply to Ana Tudor from comment #11)

This is still an issue today, at least on Windows and it causes trouble when
trying to create things like pie charts or rays using strokes.

Live test https://codepen.io/thebabydino/pen/LrvaRZ?editors=1000

Screenshot of result in Chrome (expected)
https://pbs.twimg.com/media/DhQdugpWAAARkb7.jpg

Screenshot of result in Firefox/ Edge
https://pbs.twimg.com/media/DhQdugrXcAA99VK.jpg

Seems to become more obvious the more slices the pie we create this way has.

Live test #2 https://codepen.io/thebabydino/pen/QBXxmV?editors=1100

Screenshot of result in Chrome (expected)
https://pbs.twimg.com/media/DkvPnt1W4AAtOqq.jpg

Screenshot of result in Firefox/ Edge
https://pbs.twimg.com/media/DkvPntxXsAEI2KU.jpg