css - Overflow hidden on an absolute positioned SVG
问题描述
Want to make the parts of the circle that overflows outside of the shadowed container disappear. I'm using 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/
Result:
解决方案
When you want to use overflow: hidden
with position: absolute
, you have to know that the overflow is based on the first positioned ancestor;
In your example, you need a position: relative
on the .container
, and some negative offsets on your .bg
. Here : 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>
推荐阅读
- c# - Linux 中的 P4API.NET 兼容性
- sql - ORA-00933 找不到我缺少的东西
- javascript - 如何在 li 中使用 event.target.value
- caching - 刷新 DNS 并清除缓存后无法加载 .dev 网站(在移动设备上运行良好)
- debian - 远程 NRPE 代理未从 Nagios 服务器获取参数
- haskell - Haskell 中用于 CLI 应用程序的 IO 状态
- python - 尝试创建日志时出现不支持的格式字符“%”错误
- add - Odoo[12]:如何从下拉字段中自动添加一个或多个关注者
- php - 如何避免添加与其他活动日程冲突的活动?
- python - AttributeError:模块“cplex”没有属性“Cplex”