html - 难以将蓝色变为透明

Question

如何将蓝色变为透明？https://jsfiddle.net/o64znkc5/

这就是我想要在代码中做的所有事情。

我怎么能做到这一点？

它要求我提供更多信息，但这就是一切。

我不知道该怎么做。

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

标签： htmlcsssvgtransparent

Answer 1

您现在拥有它的方式是不可能归档它，transparent或者none尽管您可以将它填充为白色作为背景。

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

<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" fill="red" />
            <path 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>

但是，如果您需要它是透明的，我会像这样更改代码：我正在使用由两条路径制成的蒙版来刺穿红色底座。请注意，在面具中，应该是一个洞的地方被填充为白色，而可见部分则保持黑色。

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

  <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            <circle cx="0" cy="0" r="113"  />
            <path fill="red" mask="url(#m)"  d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
            <mask id="m">
            <path fill="white"  d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
            <path fill="black" 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" />
              </mask>
          </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>

另一个观察：为了保持一致性，我将只使用<use>按钮内的元素，方法是使 svg 元素不可见， width="0" height="0" 和 position:absolute;

此外，您不需要按钮内的 svg 元素内的 width="100%" 。默认情况下，它们将是 100% 宽

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

<svg width="0" height="0">
          <g id="exit">
            <title>exit</title>
            <circle cx="0" cy="0" r="113"  />
            <path fill="red" mask="url(#m)"  d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
            <mask id="m">
            <path fill="white"  d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
            <path fill="black" 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" />
              </mask>
          </g>
        </svg>



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

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

      <button class="exit" type="button" aria-label="Close">
        <svg  viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
      
      
      <button class="exit" type="button" aria-label="Close">
        <svg viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
      
      <!--You can add as many buttons you want using rhe same structure-->
      
     <button class="exit" type="button" aria-label="Close">
        <svg viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
      
      
     <button class="exit" type="button" aria-label="Close">
        <svg viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>