GSAP: SVG не центрируется, как ожидалось - PullRequest
Новая
       51

GSAP: SVG не центрируется, как ожидалось

1 голос
/ 07 ноября 2019

2 вопроса о этом CodePen

Screenshot from CodePen showing a red and a green balloon.

  1. Почему не красныйшар заканчивается в центре перекрестия, учитывая, что я установил transformOrigin:"50% 50%"?
  2. Почему зеленый шар, кажется, имеет свое происхождение, установленное на "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, 1, {scale:2, y:100})

CSS

Не применимо.

...