Bug 113278 – Gradient Fill does not render properly in svg, when definition is in independent svg

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: SVG

[Gaurav]

Gradient Fill does not render properly in svg, when definition is in independent svg.

1.) Create SVG gradient definition independently in a SVG.
<svg version="1.1">
  <defs>
    <radialGradient id="svg_backgroundDiv301_fill-outside" gradientUnits="userSpaceOnUse" cx="50%" cy="0%" r="70%"
                          fx="50%" fy="0%">
            <stop offset="0.00%" style="stop-color: #ffffff; stop-opacity: 1;"></stop>
            <stop offset="40.00%" style="stop-color: #fdfdfd; stop-opacity: 1;"></stop>
            <stop offset="100.00%" style="stop-color: #7b7b7b; stop-opacity: 1;"></stop>
          </radialGradient>
  </defs>
</svg>

2.) create a div, create sub svg element and apply the fill using the created defination.

<div id="s-backgroundDiv30" style="position: absolute; left: 0px; top: 0px; z-index: 0; height: 540px; width:960px">
  <svg id="s-backgroundDiv301_svg" version="1.1" x="0" y="0" style="left: 0px; top: 0px; position: absolute;">
    <defs>
    </defs>
    <rect id="s-backgroundDiv301_rect_svg" width="100%" height="100%" fill="url(#svg_backgroundDiv301_fill-outside)"></rect>
  </svg>
</div>


Actual Results: Radial gradient with center at top, right is rendering.

Expected Results: Radial gradient with center at top, center should render.

[Gaurav]

Created attachment 195018 [details]
Sample HTML

[Ahmad Saleem]

Created attachment 459845 [details]
Safari 15.5 renders similar to other browsers

I am unable to reproduce following bug using Safari 15.5 and Safari TP 146. Based on screenshot, the rendering is inline with other browsers (Chrome Canary 104 and Firefox Nightly 102). I would go for WON'TFIX for this bug or RESOLVED. Thanks!

[Alexey Proskuryakov]

Thank you for checking!