Javascript 使用GSAP设置SVG模式变换的动画

我的svg中有以下内容：

<rect fill="url(#texture)" width="100%" height="100%" />
<defs>
    <pattern id="texture" patternUnits="userSpaceOnUse" patternTransform="scale(0.5)" width="300" height="300">
        <image id="texture-image" xlink:href="texture.png" x="0" y="0" width="300" height="300" />
    </pattern>
</defs>

无论如何，我真的希望有人能通过使用类似以下语法来阐明如何使用GSAP来实现此结果：

TweenLite.to("#texture", 1, { 
    patternTransform: 'scale(0.8)', 
    ease: Power2.easeInOut 
});

非常感谢

我终于找到了答案。 如果有人需要它，以下是操作方法：

var svgTexture = document.getElementById('texture'),
    anim = { 'scale' : 0.5 }; // 0.5 is the initial default value

TweenLite.to(anim, 2, { 
    scale: 0.3, 
    onUpdate: function() {
        svgTexture.setAttribute('patternTransform', 'scale('+ anim.scale +')') 
    } 
});

---

库斯，这对我来说不是动画。有办法把图案移到左边吗？

TweenLite.to("#texture", 1, { 
    patternTransform: 'scale(0.8)', 
    ease: Power2.easeInOut 
});

var svgTexture = document.getElementById('texture'),
    anim = { 'scale' : 0.5 }; // 0.5 is the initial default value

TweenLite.to(anim, 2, { 
    scale: 0.3, 
    onUpdate: function() {
        svgTexture.setAttribute('patternTransform', 'scale('+ anim.scale +')') 
    } 
});