用 SVG 剪掉半个圆形标题答案

【问题标题】：Cutting out half a circle header with an SVG用 SVG 剪掉半个圆形标题
【发布时间】：2018-08-03 01:39:11
【问题描述】：

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

它应该是响应式的并保持形状，我想使用背景 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>

【问题讨论】：

标签： html css svg path clip

【解决方案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>

【讨论】：