多浏览器上的 SVG 剪辑

Posted 2023-03-23

【中文标题】多浏览器上的 SVG 剪辑

【英文标题】：SVG Clipping on multi Browser

【发布时间】：2018-02-10 09:44:41

【问题描述】：

我设计了一张测量卡，其中个人资料图像被半椭圆切割，我尝试了几种方法（svg mask，svg clipping），但所有这些方法都不起作用。特别是在 Safari 上。

有人知道如何实现这种布局吗？

如果对你有帮助，这里是 SVG 半圆 SVG CIRCLE

【问题讨论】：

你试过用画布吗？ ***.com/questions/4276048/…

问题是，这是个人资料图片，因此每个用户都会更改。我不能在 css 中使用修复图像。以这种方式裁剪 div 元素会很棒。

画布可以执行图像处理（请参阅链接）或更准确地说：***.com/a/6889378/3588584。然后客户端将裁剪图像并显示它。无需固定图像，得到广泛支持。

你可以试试border-radius，效果差不多

@OvidiuUnguru 是的，我已经尝试过了，但它永远不会像设计。至少我无法得到它

【参考方案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>

【讨论】：

thx 老兄，这适用于形状，但问题是，如果我在其上显示用户名，它会移出形状，里面的阴影也会在名称后面。知道如何解决吗？长名称应该只打破但永远不要离开元素

更新了示例。您必须将名称与之前的图像完全一样。我通过bottom: 15px; 对齐底部的名称，并将文本的最大宽度限制为90px。对于您的情况，您必须根据需要调整宽度和高度。