Bug 195549

Summary:

Support opacity in stop-color attribute for SVG <stop> element

Product:

WebKit

Reporter:

Dan <dan>

Component:

SVG

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

ahmad.saleem792, sabouhallawa, webkit-bug-importer, zimmermann

Priority:

Keywords:

InRadar

Version:

Safari 12

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
test case	none
Firefox vs. Safari 12 rendering gradient alpha	none

Description Dan 2019-03-11 03:27:37 PDT

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.)

Comment 1 Radar WebKit Bug Importer 2019-03-11 16:50:53 PDT

<rdar://problem/48789566>

Comment 2 Said Abou-Hallawa 2019-03-11 17:18:14 PDT

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.

Comment 3 Said Abou-Hallawa 2019-03-11 17:18:51 PDT

Created attachment 364317 [details]
test case

Comment 4 Dan 2019-03-12 02:25:42 PDT

Created attachment 364371 [details]
Firefox vs. Safari 12 rendering gradient alpha

Comment 5 Dan 2019-03-15 00:24:05 PDT

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?

Comment 6 Ahmad Saleem 2022-12-14 14:22:42 PST

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'.