Положение SVG-пути под изображением с динамической высотой - PullRequest
Новая
       9

Положение SVG-пути под изображением с динамической высотой

0 голосов
/ 11 октября 2018

Я пытаюсь расположить произвольный путь под загружаемыми изображениями, изображения будут иметь одинаковую ширину, но высота будет варьироваться.Я использую реагирующую меру, чтобы получить ширину и высоту моего изображения в 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

...