Question

我已经设置了一个带有两条折线的简单SVG，并尝试使用GSAP的MorphSVG在它们之间进行变换。 https://greensock.com/morphSVG

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve">
    <polyline id="plainLine" class="st0" points="298,279 387.5,279 469.2,279 596,279"> </polyline>
    <polyline id="roofLine" class="st0" points="297.6,282 385.8,257.9 469.2,279 596,279"> </polyline>
</svg>

根据文件，它似乎应该如下：

TweenLite.to("#plainLine", 1, {morphSVG:"#roofLine"});

但是尽我所能，没有任何事情发生......

这里是我的代码的小提琴：

https://jsfiddle.net/o48g3h0b/

Answer 1

变形SVG与路径一起使用而不是多边形，矩形和矩形您需要先将多边形转换为路径变形可以自己转换矩形，多边形和圆圈到路径，但对于复杂的对象，它表现为粘性

转换矩形，多边形，圆圈使用此线程中已提到的Raphael技术 Convert Polygon to Path

检查我的Pen我创造了相同的效果

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve"> <path id="plainLine" d="M298,279L387.5 279 469.2 279 596 279" style="stroke: red;stroke-width:8;fill:none"/> <path id="roofLine" d="M297.6,282L385.8 257.9 469.2 279 596 279" style="stroke: red;stroke-width:8;fill:none;"/> </svg> </body>

另外一件事你注意到MorphSVG插件是会员需要插件我建议使用snap svg＆amp;用于变形svg的动画路径方法

Answer 2

我知道它是什么...... MorphSVG是一个＆＃34; Club Greensock＆＃34; （即付费）插件我还没有付钱。难怪。

无法使GSAP MorphSVG正常工作

2 个答案: