CODEWITHSUNDEEP
htmlcsssvg
Matt
Matt

Reputation: 8942

Transparent overlapping circles without border in background

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

enter image description here

Upvotes: 0

Views: 573

Answers (3)

Paul LeBeau
Paul LeBeau

Reputation: 101820

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>

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 123995

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>

Upvotes: 4

Will
Will

Reputation: 122

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>

Upvotes: 1

Related Questions