多浏览器上的SVG剪辑

问题描述：

我设计了一张测量卡，其中配置文件图像被半椭圆形切出，我尝试了几种方法，但所有这些方法都不起作用。特别在Safari上。多浏览器上的SVG剪辑

有没有人有一个想法如何实现这种布局？

这里是SVG半圈，如果有帮助雅 SVG CIRCLE

您是否尝试过使用画布？ https://stackoverflow.com/questions/4276048/html5-canvas-fill-circle-with-image – Bellian

问题是，这是一个配置文件图像，所以它由每个用户更改。我无法在CSS中使用修复图像。这样很棒的裁剪div元素。 – kdskii

画布可以执行图像处理（请参阅链接）或更精确：https：//stackoverflow.com/a/6889378/3588584。客户端然后将裁剪图像并显示它。不需要固定的图像，并得到广泛的支持。 – Bellian

答

您可以使用圆角半径达到这个布局：

如果你想要一个椭圆形，你必须特大型剪裁元素并把它里面抵消图像：

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>

thx伙计，与形状一起工作，但问题是，如果我在其上显示用户名称，它也会移出形状，也就是名称后面的阴影。任何想法如何解决？长名称只应该打破，但不要离开元素 – kdskii

更新了示例。你必须像以前一样将图像的名字放在非常像的位置。我通过'bottom：15px;'将底部的名称对齐，并将文本的最大宽度限制为'90px'。对于你的情况，你必须调整宽度和高度，因为你需要它。 – Bellian

多浏览器上的SVG剪辑

相关推荐