SVG 的 GSAP 动画 <symbol> 不更新 <use>

Question

为什么，例如，使用 TweenMax 对 <symbol> 中元素的 fill 属性进行动画处理没有效果，但使用 jQuery的attr()函数有?

Answer 1

AttrPlugin of GSAP 是这里应该使用的：

TweenMax.fromTo('symbol > rect', 1, {attr: {fill: 'blue'}}, {attr: {fill: 'red'}});

Example.

进一步阅读：

Answer 2

这是因为 symbol 标签是一个结构元素，不直接用 CSS 呈现。只有通过标记引用的 symbol 元素的实例是。您必须为元素的属性设置动画，使用 GSAP AttrPlugin, instead of the CSSPlugin

MDN SVG 符号：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

W3C 符号规范：http://www.w3.org/TR/SVG/struct.html#SymbolElement

您还可以使用 GSAP AttrPlugin 为元素或元素内部的元素值设置动画。

与 SVG 一起使用的 GSAP AttrPlugin 示例：

GSAP SVG 过滤器高斯模糊：http://codepen.io/jonathan/pen/GJPjjQ

GSAP SVG 滤镜色调旋转：http://codepen.io/jonathan/pen/MwPzox

GSAP SVG 过滤器位移湍流：http://codepen.io/jonathan/pen/NqZPwd

我还注意到您上面的示例在 Chrome 中不起作用。但是 jQuery 和 GSAP（没有 AttrPlugin）都更改了 Firefox 中的填充，即使它不是规范的标准。但是 GSAP AttrPlugin 是你最好的选择，因为 jQuery attr() 只是一个 setter 和 getter 方法，即使使用 jQuery animate 也是不好的，因为它使用 setTimeout for它的动画时间。而 GSAP to() 方法实际上使用 requestAnimtionFrame (RAF) 对值进行动画处理。

SVG 的 GSAP 动画 <symbol> 不更新 <use>

GSAP Animation of SVG <symbol> does not update <use>

jquery

svg

gsap