将 svg 转换为 css 形状

Question

我正在尝试在 css 中执行此“圆形蛋”，但它不适用于我。

我有这个圆圈作为 SVG，我想在我的网站中使用它并在其中放置一个图像， 使用 Pattern 和 Image 将图像放置在 svg 中对我不起作用，因为我无法控制背景大小并重复。

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="115" height="120"><defs><path id="a" d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z"/></defs><use fill="#00C1B1" fill-rule="evenodd" transform="translate(-33)" xlink:href="#a"/></svg>

所以我决定使用 css 制作这张图片

请注意左上角 Circle

.circle{
  margin-top:50px;
  margin-left:50px;
  background-color:#00C1B1;
  border-radius: 70% 50% 60% 60% / 70% 70% 55% 60%;
  height: 120px;
  width:115px;
}

<div class="circle">
</div>

我尝试过使用边界半径，但它似乎不适用于我。

谢谢

Answer 1

使用 SVG 作为遮罩，您可以轻松考虑背景。只需确保正确设置 SVG 的 viewBox：

.box {
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="30 0 120 120" ><path d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z" fill="black"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="30 0 120 120" ><path d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z" fill="black"/></svg>') center/contain no-repeat;
   width:200px;
   display:inline-block;
   background:red;
}
/* to maintain the ratio */
.box::before {
   content:"";
   display:inline-block;
   padding-top:100%;
}


svg {
  border:1px solid;
}

<div class="box"></div>

<div class="box" style="background:url(https://picsum.photos/id/1000/800/800.jpg) center/cover;width:150px;"></div>

<div class="box" style="background:url(https://picsum.photos/id/1074/800/800.jpg) center/cover;width:100px"></div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" viewBox="30 0 120 120" ><path d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z" fill="black"/></svg>