CSS - переполнение границ SVG

Question

У меня есть граница в виде файла SVG, которую я хочу разместить поверх другого изображения. Я использую абсолютное положение, чтобы поместить его поверх изображения. Однако у меня проблема с переполнением изображения внизу, потому что вокруг изображения сверху есть прозрачные области. Я хотел бы показать только нижнее изображение внутри границы, поэтому оно черное.

Изменение файла SVG не вариант, потому что вместо черного цвета будет фоновое изображение.

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
.item-container {
  background-color: #000;
  height: 275px;
}

.item-container .item-image {
  position: absolute;
  right: 50px;
  top: 0px;
  z-index: 1;
  max-height: 275px;
}

.item-container .item-border {
  position: absolute;
  right: 50px;
  top: 0px;
  z-index: 2;
  max-height: 275px;
}

<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-12 item-container">
        <img src="https://via.placeholder.com/290x275" class="item-image" alt="">
        <img src="https://svgur.com/i/92T.svg" alt="" class="item-border">
    </div>
  </div>
</div>

Answer 1

Вы можете попробовать использовать background-image вместо статического изображения в качестве границы.https://www.w3schools.com/cssref/pr_background-image.asp