多浏览器上的SVG剪辑

Question

我设计了一张测量卡片，其中剖面图片被半个角片切割出来，我尝试了几种方法（svg mask，svg clipping），但所有这些方法都不起作用。特别是在Safari。

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

这是SVG Half Circle，如果它有帮助你 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>