过渡不适用于射线填充

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

"就像你不能从一个背景图像顺利过渡到 另一个，您无法从一个 CSS 渐变平滑过渡到 另一个。它是二进制的;显示一个背景图像或 其他。

实际上不支持背景渐变过渡。有解决方法和黑客，但在大多数情况下，您将无法使用标准方法进行过渡。我建议阅读这篇关于媒介的文章以获取可能的解决方案(这就是上述引用的来源(。

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

编辑：在SVG的情况下

，您需要在SVG中使用<animate>标签。请参阅此演示以了解 in 和 SVG 的用法： https://designmodo.com/demo/svg-gradients/

Answer 2

一个油漆名称与另一个油漆名称之间的连续过渡是什么？url(#MyGradient)和#000之间有什么？

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

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