Question

我正在尝试在正在加载的图像下方放置自定义路径，这些图像将具有相同的宽度，但高度会有所不同。我正在使用react-measure来获取svg中图像的宽度，高度，以便稍后再使用该高度来定位下一个元素，但是由于可能是长宽比，我得到了错误的值。

<svg viewBox="0 0 1000 2000">
  <svg
    x="150"
    y="200"
  >
    <Measure
      bounds
      onResize={ (contentRef) => {
        this.setState(prevState => ({ imgDimensions: contentRef.bounds }));
      } }
    >
      { ({ measureRef }) => (
        <svg x="0">
          <image className={ classes.img } ref={ measureRef } width="200" xlinkHref={ image } />
        </svg>
      ) }
    </Measure>
    <rect x="5" y={ this.state.imgDimensions.height } height="2" width={ width } />
  </svg>
</svg>

示例值：

imgDimensions:
bottom: 504.6000061035156
height: 176.39999389648438
left: 595
right: 835
top: 328.20001220703125
width: 240

及其位置： https://imgur.com/a/o4bbFG2

该黑线应恰好是图像结束的位置。

但是，如果我调整网站大小并刷新它-这就是我得到的：https://imgur.com/a/n9sxTic

将SVG路径定位在具有动态高度的图像下

0 个答案: