Changing blue color to transparent

How do I change the blue color to transparent? https://jsfiddle.net/o64znkc5/

I can’t figure out how to do it.

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  clip-path: circle(50%);

}

.exit svg {
  fill: red;
}
<button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            <path fill="red" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
            <circle cx="0" cy="0" r="113" />
            <path fill="blue" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
          </g>
        </svg>
      </button>

      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>

      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
1 Like

You can change the blue to transparent easily but that means you will see the red circle behind it. You can’t cut a hole in the red background.

.exit svg path[fill="blue"]{
  fill:transparent;
}

You would need to remove the red background and instead do a red rounded border only thus leaving the background transparent.

Like Paul says, you’re not doing a cut out. This is also working a lot harder than it needs to. This achieves the same thing:

      <button class="exit" type="button" aria-label="Close">
       <svg viewBox="-15 -15 288 288">
          <g id="exit" transform="translate(100,100)">
          <path d="M0 0-70 70A99 99 0 0 1-70-70Z"/>
          <path d="M0 0-70-70A99 99 0 0 1 70-70Z"/>
          <path d="M0 0 70-70A99 99 0 0 1 70 70Z"/>
          <path d="M0 0 70 70A99 99 0 0 1-70 70Z"/>
        </g>
      </svg>        
      </button>

with this css - and this is ALL the css. All the unnecessary dross is removed.

.exit {
  margin: auto;
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: none;
  padding: 0;
  border-radius: 50%;
  stroke: red;
  stroke-width:10;
  fill: transparent;
}

note: please, please, PLEASE stop trying to do partial pixels. Pixels are the smallest unit and should be WHOLE NUMBERS. Otherwise the browser has to decide how to round, and results may not be what you want!

2 Likes

do partial pixels

What is meant by that?

I don’t have a lot of experience working with svgs, though, I do use them.

Tinkering with svgs is pretty new to me.

This…stop doing this. I’ve seen this in other code examples from you, and not just for svgs. IIRC, I saw this for font sizes too. Things like px and pt should only be in whole numbers.

  width: 47.63px;
  height: 47.63px;

this will basically adjust to this, which if that’s OK to round up, then just round them up so the browser doesn’t have to. It’s better for the speed of your site, and makes it more likely you’ll get the results you want.

  width: 48px;
  height: 48px;

Though to be honest, I wouldn’t use px sizing in this situation regardless. I’d switch over to using relative sizing (ems/rems/%) and only use pixels for min/max sizing to set size boundaries.

3 Likes

I tried doing that here, all I see is a red circle: https://jsfiddle.net/kox5q137/

You didn’t clear out everything - you left the fill. I told you the css I gave you was it.
image

Minor tweaks to properly center the items.
https://jsfiddle.net/davemaxwell/d8tun2se/4/

1 Like

There is an issue I found.

Hover works with the mouse not directly over the circle here in your code. https://jsfiddle.net/cny53L6u/

In my code, the mouse has to be directly over the circle for hover to work. https://jsfiddle.net/gjt7v2d0/

How would your code be fixed or adjusted?

It’s due to a the circle not completely filling the button. I did that to prevent the circle from cropping really ugly. It can be proven by adding a border on the button hover

button:hover { border: 2px solid pink; }

I couldn’t figure out how to completely fill the button without cropping the circle. Perhaps @PaulOB has a better way to fill the circle more completely. Personally, the small lip doesn’t bother me.

1 Like

SVG isn’t my think but in css you could cut the area out a bit more with different clip-path value.

.exit {
  margin: auto;
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: none;
  padding: 0;
  border-radius: 50%;
  stroke: red;
  stroke-width: 15;
  fill: transparent;
  clip-path: circle(40%);
  overflow:hidden;
}
2 Likes

Told you Paul would know.

That 40% pretty much puts the hover right on the circle. Might be a hair outside of it but a very miniscule amount…

2 Likes

One way to test it is by adding: background: black;
https://jsfiddle.net/3Lwejfox/

  clip-path: circle(40%);
  overflow: hidden;
  background: black;
}

I found clip-path: circle(19px); works good there.

In the code here, the circle is hoverable using mask to make the blue color transparent. https://jsfiddle.net/zu9ajgpt/

I added a hover here to only the “Xhttps://jsfiddle.net/vp8shwf3/

Using mask, how do I make the blue color transparent?

Keeping the hover on the “X” how do I use the masking code to make the blue color transparent all the time?

Hover is not being added to the transparent part.

This seems very difficult to figure out how to do.

I can do it in css without svg.:slight_smile:

Much nicer html to work with.

As you are not scaling this I think the css version looks cleaner.

2 Likes

What was the reason for the inclusion of -webkit-appearance: none; ?

I have never used that css property before in code?

How would I be able to visually see it doing something in the code?

If I remove it from the code I see no difference?

Is there some way to attach a color to it to be able to see what it is doing?

I tend to add it to buttons as you never know how the system may display them and is really just a safety measure to remove system styling. You can see examples here.

1 Like

How would you make the play button image using css instead of an svg?

https://jsfiddle.net/hc3ztx9s/

You added these in there: <b></b> I have never seen that done before.

Is there a name for that technique you used to do that?

Also, would the code be able to be written without those in it?

<button class="exitnew" type="button" aria-label="Close"><b></b></button>

It’s a placeholder he’s using to put add the red circle. Check the css styling.

So no, it can’t be removed if you want the circle.

1 Like

In your code, how is hover added to the X?

That’s how I had it in the svg code: https://jsfiddle.net/vp8shwf3/

Background stays transparent, only the X changes color on hover.