多浏览器上的 SVG 剪辑

debugcn 发表于 Dev

基德斯基

我设计了一张测量卡，其中的个人资料图像被半椭圆剪掉，我尝试了几种方法（svg 蒙版、svg 剪裁），但所有这些方法都不起作用。特别是在 Safari 上。

有谁知道如何实现这种布局？

这是 SVG 半圆，如果它对你有帮助SVG CIRCLE

贝利安

您可以使用边框半径来实现此布局：

如果你想要一个椭圆形状，你必须放大裁剪元素并将图像偏移放在里面：

document.getElementById('button1').addEventListener('click', function(){
  document.getElementById('profile').classList.toggle('view');
});

.profile{
  background: #1111cc;
  width:300px;
  height:100px;
  position:relative;
  overflow:hidden;
  margin: 20px;
}



.clip{
  position:absolute;
  background: red;
  width: 100px;
  height:130px;
  top: -15px;
  border-top-right-radius: 50px 65px;
  border-bottom-right-radius: 50px 65px;
  overflow:hidden;
}
.img{
  position: absolute;
  top: 15px;
  background: rgba(100,100,100,0.8);
  width:100px;
  height:100px;
}
.name{
  position: absolute;
  bottom: 15px;
  margin: 0;
  padding: 0 10px 0 0;
  background: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  width: 100px;
}

.profile.view .clip{
  overflow: initial;
}
.profile.view{
  overflow: initial;
}

<div id="profile" class="profile">
  <div class="clip">
    <img class="img" src="https://i.stack.imgur.com/oiszU.png">
    <p class="name">My name is too long for this world..</p>
  </div>
</div>
<button id="button1">view all shapes</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。