SVG: Gradient fill that is part of a pattern is cut off

RESOLVED FIXED

Status

()

Core
SVG
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: Tsvetomir Tsonev, Unassigned)

Tracking

9 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments, 1 obsolete attachment)

(Reporter)

Description

5 years ago
Created attachment 590133 [details]
Test case

Linear gradients that are part of a pattern are not rendered correctly.

This is always visible when the pattern is applied to a path.

The behavior changes when the pattern is applied to a circle. I've created an animated test case that clearly shows this. Note that turning the animation off doesn't help.

I was able to work around it by setting patternContentUnits to objectBoundingBox and transforming the coordinates.

Originally reported on StackOverflow:
http://stackoverflow.com/questions/8929731/svg-pattern-inconsistency-between-chrome-and-firefox
(Reporter)

Comment 1

5 years ago
Created attachment 590134 [details]
Workaround

Workaround for the problem by using patternContentUnits="objectBoundingBox"

Updated

5 years ago
Component: General → SVG
Product: Firefox → Core
QA Contact: general → general
Created attachment 641449 [details]
testcase

Actually circle is no different to path. Your testcase changes y for the circle, but transform for the path, meaning that you are not changing user space for the former, but are for the latter. This testcase animates transform for both the circle and the path to compare apples to apples.

I'm not entirely sure this is even a bug to be honest, but I don't have time to consider it properly right now during this drive-by comment.
Attachment #590133 - Attachment is obsolete: true
(Reporter)

Comment 3

5 years ago
Created attachment 641465 [details]
Static test case

Static version of the test case
(Reporter)

Comment 4

5 years ago
Created attachment 641474 [details]
Browser screenshots

Screenshots of the static test case in FF/Chrome/IE
(Reporter)

Comment 5

5 years ago
I agree with you, translate has the same effect for circles and paths.

Animation is not required to reproduce the bug. I've used it to highlight the issue, but it can be observed for static shapes. See the static test case and screenshots.

Updated

5 years ago
Depends on: 773595

Comment 6

5 years ago
Fixed by patch in bug 773595
Status: UNCONFIRMED → NEW
Ever confirmed: true

Updated

5 years ago
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.