SVG 图像视图框调整大小

Question

我有这段代码，您可以在下面的代码段中运行。我的问题是，在我的生产环境中，我有 2 个 SVG，一个在另一个之上，每个都包含各种内容。当用户单击 header 的任一侧时，如代码段所示，顶部的 SVG 应该增大或缩小以显示更多或更少的下方 SVG（我知道这可能不是高性能的关于 SVG 可能被绘制在下方 - 但我的问题可能与此有关，因为答案可能与我对 SVG viewbox 缺乏理解有关。

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

我两个都改错了吗？有没有办法只改变宽度？这仍然会导致如下所示的故障吗？

感谢您的帮助！

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

SVG 图像视图框调整大小

SVG Image viewbox resizing

reactjs

svg

gsap