用SVG切出半个圆头

Question

嘿，我正在努力实现以下修复标题形状。

它应该是响应并保持形状，我想使用背景SVG，但我正在努力削减内圈部分，而不是将其变为黑色以及相应地缩放它。

body {
  height: 1000px;
}


.circle {
    padding-top: 4rem;
    height: calc(100% - 4rem);
    /* margin-bottom: -4rem; */
    background-size:cover;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 500 250' preserveAspectRatio='xMinYMin meet'%3E %3Ccircle fill='evenodd' cx='250' cy='250' r='250' /%3E %3C/svg%3E");

}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<header class="fixed w-screen h-32 bg-green-light">

    <p class="pl-4 pt-2 text-4xl h-16 text-white">
      blabla
    </p>
  <div class="circle">  </div>
</header>

<main class="w-screen pt-16">
  <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
</main>

Answer 1

您的SVG背景需要是一个带有圆形孔的矩形。

如果您不想在矢量编辑器中绘制此形状，则需要使用<mask>在矩形中创建圆孔。

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 500 250' preserveAspectRatio='xMinYMin meet'>
  <mask id="circular-hole">
    <rect width="100%" height="100%" fill="white"/><!-- part to keep -->
    <circle cx='250' cy='250' r='250' fill="black"/><!-- black for the hole -->
  </mask>
  <rect width="100%" height="100%" fill="#51d88a" mask="url(#circular-hole)"/>
</svg>

您的页面已使用此SVG更新：

body {
  height: 1000px;
}


.circle {
    padding-top: 4rem;
    height: calc(100% - 4rem);
    /* margin-bottom: -4rem; */
    background-size:cover;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 500 250' preserveAspectRatio='xMinYMin meet'%3E %3Cmask id='circular-hole'%3E %3Crect width='100%25' height='100%25' fill='white'/%3E %3Ccircle cx='250' cy='250' r='250' fill='black'/%3E %3C/mask%3E %3Crect width='100%25' height='100%25' fill='#51d88a' mask='url(%23circular-hole)'/%3E %3C/svg%3E");

}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<header class="fixed w-screen">
  <p class="pl-4 pt-2 text-4xl h-16 text-white bg-green-light">
    blabla
  </p>
  <div class="circle">  </div>
</header>

<main class="w-screen pt-16">
  <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
    <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
   <div class="h-32 bg-red">hi</div>
  <div class="h-32 bg-orange">hi</div>
</main>