Changing blue color to transparent

asasass · November 15, 2021, 12:36pm

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>

PaulOB · November 15, 2021, 2:18pm

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.

DaveMaxwell · November 15, 2021, 3:26pm

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!

asasass · November 15, 2021, 4:19pm

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.

DaveMaxwell · November 15, 2021, 4:31pm

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.

asasass · November 15, 2021, 4:37pm

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

DaveMaxwell · November 15, 2021, 4:42pm

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

Minor tweaks to properly center the items.

asasass · November 15, 2021, 4:58pm

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?

DaveMaxwell · November 15, 2021, 5:36pm

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.

PaulOB · November 15, 2021, 7:06pm

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

DaveMaxwell · November 15, 2021, 7:19pm

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…

asasass · November 15, 2021, 7:32pm

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.

asasass · November 15, 2021, 10:41pm

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 “X” https://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.

PaulOB · November 16, 2021, 12:07pm

I can do it in css without svg.

Much nicer html to work with.

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

asasass · November 16, 2021, 1:23pm

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?

PaulOB · November 16, 2021, 2:56pm

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.

asasass · November 16, 2021, 6:36pm

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

https://jsfiddle.net/hc3ztx9s/

asasass · November 16, 2021, 6:58pm

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>

DaveMaxwell · November 16, 2021, 7:02pm

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.

asasass · November 16, 2021, 7:25pm

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.