透明重叠的圆圈，背景无边框

Question

Is it possible to implement transparent overlapping svg circle elements without circles border in transparent area?

Answer 1

You can clip the bits you don't want to draw...

 <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

Check this link to view information about position absolute css code. I think this is what you are looking for. You might also want to view information about z-index. If you have any questions or want me to write some sample code for your problem let me know

 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

You can also use a <mask> .

I've used the same elements as @RobertLongson's answer so you can compare the approaches.

 <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>