多浏览器上的 SVG 剪辑

Question

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

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

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

Answer 1

你可以使用边框半径来实现这个布局：

如果你想要一个椭圆形状，你必须加大剪裁元素的尺寸并将图像偏移放置在其中：

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>