2017-09-01 93 views
1

我設計了一張測量卡,其中配置文件圖像被半橢圓形切出,我嘗試了幾種方法,但所有這些方法都不起作用。特別在Safari上。多瀏覽器上的SVG剪輯

有沒有人有一個想法如何實現這種佈局? enter image description here

這裏是SVG半圈,如果有幫助雅 SVG CIRCLE

+0

您是否嘗試過使用畫布? https://stackoverflow.com/questions/4276048/html5-canvas-fill-circle-with-image – Bellian

+0

問題是,這是一個配置文件圖像,所以它由每個用戶更改。我無法在CSS中使用修復圖像。 這樣很棒的裁剪div元素。 – kdskii

+0

畫布可以執行圖像處理(請參閱鏈接)或更精確:https://stackoverflow.com/a/6889378/3588584。客戶端然後將裁剪圖像並顯示它。不需要固定的圖像,並得到廣泛的支持。 – Bellian

回答

2

您可以使用圓角半徑達到這個佈局:

如果你想要一個橢圓形,你必須特大型剪裁元素並把它裏面抵消圖像:

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>

+0

thx夥計,與形狀一起工作,但問題是,如果我在其上顯示用戶名稱,它也會移出形狀,也就是名稱後面的陰影。任何想法如何解決?長名稱只應該打破,但不要離開元素 – kdskii

+0

更新了示例。你必須像以前一樣將圖像的名字放在非常像的位置。我通過'bottom:15px;'將底部的名稱對齊,並將文本的最大寬度限制爲'90px'。對於你的情況,你必須調整寬度和高度,因爲你需要它。 – Bellian