css - 溢出隐藏在绝对定位的 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一起使用时，你必须知道溢出是基于第一个定位的祖先；

在您的示例中，您需要 .container 上的 position: relative，以及 .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>