Question

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

问题是，因为我希望图像内容保持与顶部的SVG相同的大小，所以我决定使用Greensock来设置宽度和视图框的增大/缩小的动画。尽管这会引起非常讨厌的故障-在代码段中，运行代码并单击“黑框”（尤其要注意图像的左下角，但也要注意最左边的圆圈中的跳转）！

我是否同时更改了两者？有没有办法只改变宽度？还会造成如下所示的故障吗？

感谢您的帮助！

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图像视图框调整大小

1 个答案: