GSAP：SVG 未按预期居中

Question

2 个关于 this CodePen

的问题

既然我已经设置了 transformOrigin:"50% 50%"，为什么红色气球最终没有集中在十字准线上？
为什么绿色气球的起点似乎设置为 "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 affect scale, rotation, and skew. And svgOrigin uses the <svg> element's coordinate system. So svgOrigin: 50% 50% means everything is going to transform around 100,150 in the svg. transformOrigin: 50% 50% would be the center of the balloon. To center your element, use xPercent: -50 and yPercent: -50.

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

It sounds like you were expecting transformOrigin to behave like in Adobe products, where changing the registration point causes the element to move. It doesn't, but that's what xPercent/yPercent are for.

Just use those with a transformOrigin: 50% 50%, and everything should be pretty easy with curves.

他竟然还示范motion along a path。超级有帮助！

GSAP：SVG 未按预期居中

GSAP: SVG not centering as expected

svg

gsap

2 个关于 this CodePen

相关代码（我认为）