[css-transitions] Interpolation of SVG paint servers

[karip]

The spec says:

gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated. Note: [CSS3-IMAGES] may extend this definition.

paint server (SVG): interpolation is only supported between: gradient to gradient and color to color. They then work as above.

None of the web browsers interpolate SVG gradients as described by the spec. Chrome and Firefox animate gradients using a discrete jump. Safari and Edge don't animate them at all. Here's an example: https://codepen.io/anon/pen/bMJYPL?editors=1100#

There has been some discussion about this on the SVG mailing list:
https://lists.w3.org/Archives/Public/www-style/2013Apr/0441.html
https://lists.w3.org/Archives/Public/www-svg/2015Aug/0004.html

One suggestion was to use cross-fade between paint servers. That would work well between gradients and patterns.

Could the specification be updated with something which browsers can implement?

[dirkschulze]

My guess is that it is unlikely that browsers will do actual gradient interpolation between paint servers. The implementation is very different. Cross-fade requires some additional work. With the recent fill & stroke spec the fill property handles a list of fills. When that gets implemented it might be more likely that cross-fade would be implemented as well.