背景中無邊框的透明重疊圓圈

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>