无法让GSAP MorphSVG正常工作

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使用路径而不是多边形，矩形和圆你需要先将多边形转换为路径变形可以自己将矩形，多边形和圆转换为路径，但对于复杂的对象，它的行为很粘连

要转换矩形、多边形、圆，请使用本线程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 & animate path方法来变形svg。

Answer 2

我看到了什么it is...MorphSVG是一个“俱乐部绿色”(即付费)插件，我还没有付钱。没什么奇怪的。