CODEWITHSUNDEEP
htmlcsssvg
spencer.sm
spencer.sm

Reputation: 20614

Hide part of shape with transparency?

Is there a way to hide part of what you have drawn in SVG without drawing over it with another shape?

For example, I'm trying to create a empty circle with a slice cut out of one part. I was able to achieve the look I wanted but the image isn't transparent on the slice I want to hide. If I change the background color of the page it's on, I'd have to change the color of the rect as well.

I've looked into SVG clipping but it looks like that is for hiding what's outside of an area while I'm looking to do the inverse. Am I going about this the wrong way?

<svg width="60" height="60">
  <circle cx="30" cy="30" r="20" stroke-width="8" style="fill:none;stroke:#000;" />
  <rect height="8" width="22" y="26" fill="lightblue"/>
</svg>

Upvotes: 0

Views: 1564

Answers (2)

Yuri Gor
Yuri Gor

Reputation: 1463

May be you want to use an arc?

<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
 xmlns="http://www.w3.org/2000/svg" version="1.1">
  
  
 <path xmlns="http://www.w3.org/2000/svg" d="M 225,225 a150,150 0 1,1 0,100" fill="none" stroke="red" stroke-width="25"/>
</svg>

Upvotes: 1

spencer.sm
spencer.sm

Reputation: 20614

What I was looking for was a SVG mask.

I had to create a mask on the circle that consisted of two parts:

  1. A white rect that covered the entire image (white: show)
  2. A black rect of what I wanted to hide (black: hide)

Code shown below.

<svg width="60" height="60">
  <defs>
    <mask id="slice">
      <rect width="100%" height="100%" fill="white"/>
      <rect height="8" width="22" y="26" fill="black"/>
    </mask>
  </defs>
  <circle cx="30" cy="30" r="20" stroke-width="8" style="fill:none;stroke:#000;" mask="url(#slice)"/>
</svg>

Upvotes: 7

Related Questions