[GSAP：SVG未居中此CodePen的居中

Question

关于this CodePen的2个问题

1. 为什么我设置了transformOrigin:"50% 50%"，为什么红气球不以十字准线为中心？
2. 为什么根据"left top"，绿色气球的原点设置为this doc，为什么它的原点设置为"50% 50%"？

相关代码（我认为）

HTML

<svg class="container" fill="#f0c0c0" style="background: linear-gradient(to top, #ddfdff, #6dd5fa, #2980b9);
;" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <g id="green-balloon">
    <path … />
    <path … />
    <text …>🕊</text>
  </g>
  <g id="red-balloon">
    <path …/>
    <path …/>
    <text …>⚡️</text>
  </g>

  <line x1="0" y1="100" x2="200" y2="100" stroke="white" stroke-width=".5px"/>
  <line x1="100" y1="0" x2="100" y2="200" stroke="white" stroke-width=".5px" />

  <defs>…</defs>
</svg>

JS

var redBalloon = $("#red-balloon");
var greenBalloon = $("#green-balloon");

var tl = new TimelineLite({onUpdate:updateSlider});

tl.set(greenBalloon, {x:100, y:200})
  .set(redBalloon, {transformOrigin:"50% 50%", x:100,y:200})
  .to(greenBalloon, 1, {scale:2, y:100})
  .to(redBalloon, 1, {scale:2, y:100})

CSS

不适用。

Answer 1

在GreenSock论坛上为OUSblake's answer：

transformOrigin / svgOrigin影响缩放，旋转和倾斜。 svgOrigin使用<svg>元素的坐标系。因此，svgOrigin: 50% 50%表示svg中的所有内容都将在100,150左右转换。 transformOrigin: 50% 50%将是气球的中心。要使元素居中，请使用xPercent: -50和yPercent: -50。

[提供demo on Codepen后，他继续：

听起来好像您期望transformOrigin在Adobe产品中的行为一样，在其中更改注册点会导致元素移动。不需要，但这就是xPercent / yPercent的用途。 😃

只需使用带有transformOrigin: 50% 50%的那些，使用曲线就应该很容易。

他甚至甚至还演示了motion along a path。超级有帮助！