[svgwg] Issue: Use CSS gradient rules for transitioning semi-transparent stop-colors marked as agenda+

AmeliaBR has just labeled an issue for https://github.com/w3c/svgwg as
 "agenda+":

== Use CSS gradient rules for transitioning semi-transparent 
stop-colors ==
CSS gradients have [special rules to create more aesthetically 
pleasing results when transitioning to transparent 
colors](https://drafts.csswg.org/css-images-3/#example-15b97eed).  
Specifically, user agents are required to transition the 
*pre-multiplied* colors, after scaling the color intensity by the 
alpha value.   This gives the intuitive result when transitioning from
 a color to `transparent` (which is equivalent to transparent black): 
the color fades to transparent without visually darkening.

To create a similar result in SVG, you need to explicitly repeat the 
`stop-color` value, while changing the `stop-opacity` value.  This 
makes sense if you are setting `stop-color` and `stop-opacity` 
independently; why would you explicitly transition `stop-color` to 
black unless that was the effect you wanted?

However, when using semi-transparent color values or the `transparent`
 keyword within the `stop-color` property, I would expect to then get 
the same results as a CSS gradient with the same colors.  That is not 
currently specified anyware and doesn't seem to be how any browser 
currently implements it.

[Demo of the various options as a 
CodePen](http://codepen.io/AmeliaBR/pen/jrBOBv/); Screenshot:

![Screenshot of the gradients from the demo, as 
described](https://cloud.githubusercontent.com/assets/9876129/16383534/c20eab4a-3c42-11e6-80f5-ff58244ac0f7.png)

<ul>
  <li>Top: SVG gradient with constant stop-color and transitioned 
stop-opacity;</li>
  <li>2nd: SVG gradient with stop-color transitioning to black and 
stop-opacity transitioning to zero;</li>
  <li>3rd: SVG gradient with rgba colors;</li>
  <li>Bottom: CSS gradient with the same rgba colors.</li>
</ul>
<p>All transition from opaque lime to fully transparent; in all but 
the first SVG gradient, the final stop is transparent black. The CSS 
gradient scales the intensity of the color by the alpha value before 
transitioning, so you don't get the fade to gray effect.</p>

See https://github.com/w3c/svgwg/issues/180

Received on Wednesday, 20 July 2016 05:26:19 UTC