SVG Clipping on multi Browser

Question

I Designed a measurement card where the profile image is cutted out by an half elips, i tried several methos (svg mask, svg clipping), but all these methods didn't work. Specially on Safari.

Does anyone has an idea how to realize this layout?

Here is the SVG Half Circle if it helps ya SVG CIRCLE

Answer 1

You can use the border radius to achieve this layout:

If you want an elliptic shape you have to oversize the clipping element and place the image offsetted inside it:

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.sstatic.net/oiszU.png">
    <p class="name">My name is too long for this world..</p>
  </div>
</div>
<button id="button1">view all shapes</button>