使边框剪辑其他元素并显示背景内容

Question

我正在尝试创建一个旋转器，其中两个点相交，最前面的一个应该剪切另一个，让背景在几个交叉点上可见。

如果CSS无法使用SVG，那么可以使用SVG，但目前我找不到一种方法来实现这两种技术的效果。

我尝试使用clip-path，但它似乎没有做我想做的事情。

想法？

body {
  background-image: linear-gradient(to right, yellow 0%, purple 100%);
}

.a, .b {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  top: 5em;
  left: 50vw;
  border: 4px solid white;
}

.a {
  background: red;
}

.b {
  background-color: blue;
  margin-left: 30px;
}

<div class="a"></div>
<div class="b"></div>

Answer 1

在SVG中很容易做到。但是，您需要使用<mask>而不是<clipPath>。

body {
  background-image: linear-gradient(to right, yellow 0%, purple 100%);
}

svg {
  margin: 5em 0 0 50vw;
}

<svg width="80" height="50">
  <defs>
    <mask id="clipred">
      <rect width="100%" height="100%" fill="white"/>
      <circle cx="55" cy="25" r="29" fill="black"/>
    </mask>
  </defs>

  <circle cx="25" cy="25" r="25" fill="red" mask="url(#clipred)"/>
  <circle cx="55" cy="25" r="25" fill="blue"/>
</svg>