Изменение размера окна просмотра изображения SVG

Question

У меня есть этот код, который вы можете запустить ниже во фрагменте. Моя проблема в том, что в моей производственной среде у меня есть 2 SVG, один поверх другого, каждый из которых содержит всевозможный контент. Когда пользователь щелкает любую сторону заголовка, как видно из фрагмента, SVG, который находится наверху, должен увеличиваться или уменьшаться, чтобы отображать больше или меньше SVG внизу (я знаю, что это, возможно, неэффективно в отношении SVG потенциально может быть нарисован внизу - но мой вопрос, вероятно, связан с этим, поскольку ответ, вероятно, как-то связан с непониманием с моей стороны окна просмотра SVG).

Проблема в том, что я хочу, чтобы содержимое изображений Чтобы сохранить тот же размер, что и SVG наверху, я решил использовать Greensock для анимации увеличения / уменьшения ширины и окна просмотра. Хотя это вызывает очень неприятные сбои - в фрагменте запустите код и щелкните черный ящик (обратите внимание, особенно на нижний левый угол изображения, но также на скачки в крайнем левом круге)!

Am Я ошибаюсь в смене обоих? Есть ли способ изменить только ширину? Будет ли это по-прежнему вызывать сбой, как показано ниже?

Ценю вашу помощь!

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.leftPanel = null;
    this.leftPanelTween = null;
    this.rightPanel = null;
    this.rightPanelTween = null;
  }
  
  slideLeftHandler = () => {
    this.leftPanelTween = TweenMax.to(this.leftPanel, 2, {width: '100%', attr: {viewBox: "0 0 500 150"}});
  };

  slideRightHandler = () => {
    this.rightPanelTween = TweenMax.to(this.leftPanel, 2, {width: 0, attr: {viewBox: "0 0 0 150"}});
  };
  
  render() {
    return (
      <div class="Header">
        <svg width="100%" viewBox="0 0 500 150" ref={el => this.rightPanel = el} onClick={this.slideRightHandler}>
          <rect id = "middle" width="100%" height="100%" fill="black">
          </rect>
          <circle cx="400" cy="75" r="25" fill="red">
          </circle>
          <circle cx="100" cy="75" r="25" fill="red">
          </circle>
        </svg>
        <svg width="50%" viewBox="0 0 250 150" ref={el => this.leftPanel = el} onClick={this.slideLeftHandler}>
          <rect id = "middle" width="100%" height="100%" fill="red">
          </rect>
          <circle cx="100" cy="75" r="25" fill="black">
          </circle>
          <circle cx="400" cy="75" r="25" fill="black">
          </circle>
        </svg>
      </div>
    );
  }
}


ReactDOM.render(
    <Header />,
  document.getElementById('app')
);

.Header {
    margin: 0;
    cursor: pointer;
}

.Header svg {
    position: absolute;
}

.Header .leftPanel {
    top: 0;
    left: 0;
}

.Header .rightPanel {
    top: 0;
    right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

<div id="app"></div>

Answer 1

Анимация viewBox неэффективна. Я рекомендую постоянно делать SVG таким большим, каким он должен быть в конце, и просто анимировать ширину прямоугольника в SVG, по которому был выполнен щелчок.