多浏览器上的SVG剪辑

Question

我设计了一张测量卡，其中配置文件图像被半椭圆形切出，我尝试了几种方法，但所有这些方法都不起作用。特别在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>