Transparent overlapping circles without border in background

Question

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

Possible duplicate of [How to use z-index in svg elements?](https://stackoverflow.com/questions/17786618/how-to-use-z-index-in-svg-elements) — P.S., Aug 14 '17 at 23:18
svg circles have the ability to set start and stop angles, so it should definitely be possible with a little math. You could also just set a z-index with a background, which would be easier. — jhpratt, Aug 14 '17 at 23:19
@CommercialSuicide z-index wouldn't help, because circles are transparent. — Matt, Aug 15 '17 at 09:29

score 4 · Accepted Answer · answered Aug 15 '17 at 00:46

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>

Will · Answer 2 · 2017-08-14T23:38:52.290

1

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>

edited Aug 14 '17 at 23:38

answered Aug 14 '17 at 23:32

Will

122
1
9

they don't seem very transparent. – Robert Longson Aug 15 '17 at 00:24
lol sorry I didn't realize that was the problem. Give me a minute to fix that. – Will Aug 15 '17 at 00:25

score 1 · Answer 3 · answered Aug 15 '17 at 05:28

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>

Transparent overlapping circles without border in background

3 Answers3