在响应式SVG中沿运动路径进行动画处理

Question

我正在尝试用绿袜子制作动画。我想在绘制的线条上移动气球，并且图形/动画应该是可缩放的。

我无法将气球svg对齐到绘制的线。一旦浏览器宽度不等于svgs视口宽度，动画就无法正常工作。我很确定这不是可伸缩（！）矢量图形的真正精神。那我在做什么错？当svg大小改变时，如何将气球对齐线？

这是小项目的简化代码笔：

TweenMax.to("#balloon", 3, {
    bezier: {
      values: MorphSVGPlugin.pathDataToBezier("#Path23",{
        //matrix:[1.5,0,0,1.5,0,scaleX+"%"],
        offsetX: -50,
        offsetY: -50,
       align:"#balloon"}),
      type: "cubic"
    },
    ease: Linear.easeNone,
    repeat: -1,
    force3D: true
  });

CodePen

Answer 1

问题是，我正在使用两个svg而不是一个容器。最后，transformOrigin也使其工作。我更新了Codepen。现在可以了。