溢出隐藏在绝对定位的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>