Изображение SVG не выравнивается по эквиваленту «подгонки объекта» в окне просмотра 100vh

Question

Я пытаюсь получить изображение SVG, эквивалентное object-fit внутри 100vh полноэкранного контейнера.Из того, что я могу собрать, мне нужно использовать атрибут preserveAspectRatio="xMidYMid slice" и установить width="100%" height="100%"

Я не могу заставить его работать?Когда я поэкспериментирую с ним, в нижней части контейнера будет отображаться фрагмент пустого пространства, или когда изображение заполняет область просмотра, область просмотра становится намного больше, чем 100vh?

Просто чтобы заметить, что яя не могу использовать свойство background-image CSS, потому что оно является частью более широкой анимации SVG / Javascript, которую я создаю.

Codepen: https://codepen.io/emilychews/pen/YJYrEa

Кто-нибудь знает, что происходит не так?вот и какое решение будет?

Заранее спасибо за любую помощь / идеи.

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#section-1, .background-clipped {
  width: 100%;
  height: 100%;
}

<section id="section-1">
<div class="background-clipped background-clipped-1">
    <svg id="home-image-1" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
    <image x="0" y="0" xlink:href="https://i.postimg.cc/9XdQKYF1/dimon-blr-309444-unsplash.jpg" width="100%" height="100%" />
    </svg>
</div>
</section>

Answer 1

Есть несколько механизмов калибровки в работе;один для элемента <svg>, один для элемента <image>.

Тот, который вы установили для элемента <svg>, не очень полезен.Атрибут viewBox соответствует системе координат 100 на 100 пользовательских единиц внутри контейнера.Эта система координат является тогда областью просмотра для определения размера <image> с неявным preserveAspectRatio="xMidYMid meet".Если вы считаете, что это сбивает с толку: да, это проблема.

Вместо этого просто измените размер элемента <svg>, чтобы заполнить контейнер.Удалите viewBox, установите width и height на 100%.Без viewBox, preserveAspectRatio также не будет влиять на элемент <svg>.

Теперь только механизм изменения размера изображения (поместите изображение в ширину и высоту окна просмотра 100%,как описано в preserveAspectRatio), вступает в силу и работает так, как вы хотите.

Общее примечание : JPG, используемый в вашем <image>, имеет собственное соотношение сторон.Поэтому preserveAspectRatio всегда будет иметь эффект.Элемент <svg> не имеет.Только у viewBox есть такой.и это то, над чем работает атрибут.

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#section-1, .background-clipped {
  width: 100%;
  height: 100%;
}

<section id="section-1">
<div class="background-clipped background-clipped-1">
    <svg id="home-image-1" width="100%" height="100%">
        <image xlink:href="https://i.postimg.cc/9XdQKYF1/dimon-blr-309444-unsplash.jpg"
               x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
    </svg>
</div>
</section>