The SVG 2 specification states that the `stop-color` attribute in <stop> elements should support CSS Color Level 3 values, which includes the `rgba()` variant with an explicit opacity value. Furthermore, it states that: > For stop-color value types of that don't include explicit opacity information, the opacity of that component must be treated as 1. Reference: https://www.w3.org/TR/SVG2/pservers.html#StopColorProperties Safari (version 12) does not currently support specifying the stop's opacity as part of the stop-color attribute. Example SVG: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" > <defs> <linearGradient id="gradient" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color='rgba(255,0,0,0.5)'/> <stop offset="1" stop-color='rgba(0,255,0,0.5)'/> </linearGradient> </defs> <rect fill="url(#gradient)" width="100" height="100"/> </svg> (This renders correctly in current versions of Firefox and Chrome.)
<rdar://problem/48789566>
I do not see any difference between Safari, Chrome and FireFox displaying the attached test case. WebKit supports all CSS color level 3 format in SVG properties including the RGBA format. Please attach a screenshot that shows the rendering of Safari.
Created attachment 364317 [details] test case
Created attachment 364371 [details] Firefox vs. Safari 12 rendering gradient alpha
I've added an image exemplifying the rendering difference in Safari vs. Firefox. Not sure if I was supposed to also change the status of the bug?
I am not able to reproduce this bug in Safari 16.2 and it matches translucent of Firefox as in reference image and it is also matching Chrome Canary 110 and Firefox Nightly 110. Marking this as 'RESOLVED CONFIGURATION CHANGED'.