多瀏覽器上的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>