[csswg-drafts] [css-transitions] Interpolation of SVG paint servers

karip has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-transitions] Interpolation of SVG paint servers ==
The [spec](https://drafts.csswg.org/css-transitions/#animtype-gradient) 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?


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2695 using your GitHub account

Received on Wednesday, 23 May 2018 07:58:28 UTC