SVG 图像视图框调整大小

Question

我有这段代码，你可以在下面的 sn-p 中运行。我的问题是，在我的生产环境中，我有 2 个 SVG，一个在另一个之上，每个都包含各种内容。当用户单击标题的任一侧时，如 sn-p 所示，顶部的 SVG 应该增长或缩小以显示更多或更少的 SVG 下方（我知道这可能不是关于SVG 可能被绘制在下面 - 但我的问题可能涉及到这一点，因为答案可能与我对 SVG 视图框缺乏了解有关）。

问题在于，因为我希望图像内容在顶部的 SVG 增长或缩小时保持相同的大小，所以我决定使用 Greensock 来为宽度和视图框的增长/收缩设置动画。虽然这会导致非常严重的故障 - 在 sn-p 中，运行代码并单击黑框（特别注意图像的左下角，还要注意最左边圆圈中的跳跃）！

我是否错误地更改了两者？有没有办法只改变宽度？这仍然会导致如下所示的故障吗？

感谢您的帮助！

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 中为矩形的宽度设置动画。