过渡不适用于渐变填充

Question

css 过渡适用于使用 jQuery 进行的正常 SVG 路径颜色填充，如下所示。

path
{
margin-top: 25px;
height: 0;
overflow: hidden;
-webkit-transition: all 1.8s ease;
-moz-transition: all 1.8s ease;
-ms-transition: all 1.8s ease;
-o-transition: all 1.8s ease;
transition: all 1.8s ease;
}

jQuery

$(event.target).css('fill', '#000');

但是使用径向渐变填充过渡的路径填充不起作用。

<radialGradient id="MyGradient"><stop offset="5%" stop-color="#f60"></stop><stop offset="95%" stop-color="#ff6"></stop></radialGradient>

jQuery

$(event.target).css('fill', 'url(#MyGradient)');

为什么会这样？有没有其他方法可以做到这一点？

Answer 1

paint name 和另一个之间的连续转换是什么？ url(#MyGradient) 和 #000 之间有什么？

您只能在同一属性的数值之间以有意义的方式定义转换。描述为三个 RGB 通道的数字表示的颜色也算作数字（只要您不使用命名颜色）。

对于径向渐变，您可以转换 stop-color 或 stop-opacity 值。 offset 或梯度维度的 cx、cy、fx、fy、r 值可以使用 SMIL animation 语法进行动画处理。

Answer 2

“就像你不能从一张背景图片平滑过渡到 另一个，你不能从一个 CSS 渐变平滑过渡到 其他。它是二进制的；要么显示一个背景图像，要么 其他。”

并不真正支持背景渐变过渡。有变通方法和技巧，但在大多数情况下，您将无法使用标准方法进行转换。我建议在 medium 上阅读这篇文章以获取可能的解决方案（这是上面引用的来源）。

https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

编辑：对于 SVG，您需要在 SVG 中使用 <animate> 标签。有关在 SVG 中的用法，请参阅此演示：https://designmodo.com/demo/svg-gradients/