Difficulty changing blue color to transparent

Question

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

That is all I am trying to do in the code.

How am I able to do that?

It is asking me to provide more information but that is everything.

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

user_7897395 · Answer

The way you have it now is not possible filing it transparent or none although you can fill it white as the background.

.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%);

}

svg,use{fill:blue}



button:hover svg, 
button:hover use
{fill:white}

However if you need it to be transparent I would change the code like so: I'm using a mask made from the two paths to pierce the red base. Please observe that in the mask what is meant to be a hole is filled white while the visible part is keeped black.

.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%);

}

svg,use{fill:blue}

button:hover svg,
button:hover use
{fill:none}

One more observation: for consistency I would use only elements inside the buttons by making the svg element invisible with width="0" height="0" and position:absolute;

Also you don't need the width="100%" inside the svg elements inside the buttons. By default they would be 100% wide

.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%);
}

svg[width = "0"]{
position:absolute;
left:-100em;}

use{fill:blue}
button:hover use
{fill:none}

Admin · Answer

to on line 7

user_3160323 · Answer

You can set the opacity in your tag but as you will see in your example the blue shapes are over a red circle so I don't think adjusting the transparency will give the effect you are looking for.

I suggest that you change the way you are creating the svg to punch out the blue shapes from the red shape and then export the svg this will give you the result you are looking for, unless you want only the red circle to display?

Edit: your graphic is being made up of the following shapes from left to right overlaying each other. The furthest image to the right is your final graphic made up of the other three. So making the blue transparent will display a red circle.

user_17531615 · Answer

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

Difficulty changing blue color to transparent

4 Answers