关于this CodePen的2个问题

1. 考虑到我设置了transformOrigin:"50% 50%"，为什么红色气球不以十字准线为中心？
2. 为什么根据this doc，绿色气球的原点似乎设置为"left top"，为什么它应该默认设置为"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,y:100})

CSS

不适用。