Переполнение скрыто в SVG с абсолютным позиционированием

Question

Хотите, чтобы те части круга, которые выходили за пределы затененного контейнера, исчезли.Я использую bootstrap-4.

body {
  overflow: hidden;
}

.container {
  margin-top: 5%;
  width: 1200px;
  height: 625px;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
}

.bg {
  position: absolute;
  display: inline-block;
  right: 10px;
  top: 20px;
  width: 30vw;
  height: 30vw;
  overflow: hidden;
}

<div class="container shadow-lg">
  <div class="bg">
    <svg class="head_bg1" viewBox="0 0 100 100">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#614385;stop-opacity:1"/>
            <stop offset="100%" style="stop-color:#516395;stop-opacity:1"/>
        </linearGradient>
      </defs>
      <circle cx="50" cy="50" r="50" fill="url(#grad1)"/>
    </svg>
  </div>
</div>

https://jsfiddle.net/djaspar/zr8eqL8j/

Результат:

Answer 1

Если вы хотите использовать overflow: hidden с position: absolute, вы должны знать, что переполнение основано на первом позиционированном предке;

В вашем примере вам нужно position: relative на .container и некоторые отрицательные смещения на .bg. Здесь: https://jsfiddle.net/mopbq56s/

div {
  margin: 10vmin;
  position: relative;
  height: 625px;
  overflow: hidden;
}

svg {
    position: absolute;
    right: -50px;
    top: -50px;
    width: 30vw;
    height: 30vw;
}

<div>
    <svg viewBox="0 0 100 100">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#614385;stop-opacity:1"/>
                <stop offset="100%" style="stop-color:#516395;stop-opacity:1"/>
            </linearGradient>
        </defs>
        <circle cx="50" cy="50" r="50" fill="url(#grad1)"/>
    </svg>
</div>