多浏览器上的 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>

多浏览器上的 SVG 裁剪

SVG Clipping on multi Browser

html

css

svg

clipping