透明重叠的圆圈没有边框在背景中

Question

是否可以在透明区域中实现没有圆圈边框的透明重叠svg circle elements？

Answer 1

你可以剪辑你不想画的......

<svg height="100" width="150">
  <defs>
      <clipPath id="clip" clipPathUnits="objectBoundingBox">
          <rect width="0.79" height="1.2" x="-0.1" y="-0.1"/>
      </clipPath>
  </defs>
  <rect width="100%" height="100%" fill="blue" opacity="0.2" />
  <circle cx="80" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" clip-path="url(#clip)"/>
</svg>

Answer 2

选中此link以查看有关位置绝对css代码的信息。我想这就是你要找的东西。您可能还想查看有关z-index的信息。如果您有任何问题或希望我为您的问题编写一些示例代码，请告诉我们

svg{
position: absolute;
}

#svg-1{
    top: 80px;
    left: 20px;
}

#svg-2{
    top: 80px;
    left: 60px;
}

<svg id="svg-1" height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg> 
  <svg id="svg-2" height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg> 
  
  

Answer 3

您还可以使用<mask>。

我使用了与@ RobertLongson的答案相同的元素，因此您可以比较这些方法。

<svg height="100" width="150">
  <defs>
    <mask id="mask">
      <!-- white rectangle to keep the area outside the circle -->
      <rect width="100%" height="100%" fill="white"/>
      <!-- black circle creates a "hole" to hide the part inside -->
      <circle cx="50" cy="50" r="40" fill="black"/>
    </mask>
  </defs>
  <rect width="100%" height="100%" fill="blue" opacity="0.2" />
  <circle cx="80" cy="50" r="40" stroke="black" stroke-width="3" fill="none"
          mask="url(#mask)"/>
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none"/>
</svg>