在响应式 SVG 中沿运动路径设置动画

Question

我正在尝试用 greensock 制作动画。我想在一条画线上移动一个气球，graphic/animation 应该是可缩放的。

我在将气球 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。现在可以了。

在响应式 SVG 中沿运动路径设置动画

Animate along motionpath in responsive SVG

javascript

svg

gsap