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

Question

是否可以實現透明重疊的svg圓形元素，而在透明區域中沒有圓形邊框？

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

檢查此鏈接以查看有關位置絕對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>