Home > OS >  How to make color transparent using mask
How to make color transparent using mask

Time：11-17

In the code here, the circle is hoverable using mask to make the blue color transparent. enter image description here

I added a hover here to only the "X" enter image description here

This seems very difficult to figure out how to do.

const manageUI = (function makeManageUI() {
  const body = document.body;

  function animationEndHandler(evt) {
    const animationName = evt.animationName;

    if (animationName === "fadingOut") {
      fadeReset();
    }
  }

  function resetPage() {
    body.classList.add("fadingOut");
  }

  function exitClickHandler() {
    resetPage();
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener("click", exitClickHandler);
    });
  }

  function init() {
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
    body.addEventListener("animationend", animationEndHandler);
  }

  return {

    init
  };
}());


const players = (function coverUIPlayerFacade() {
  function init() {
    manageUI.init({});
  }
  return {
    init
  };
}());

players.init();
.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  animation: fadeInExit 0s forwards 0s;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
 
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg,
.fadingOut .exit svg {
  fill: green;
}

.fadingOut .exit {
  animation: fadeOutExit 5s forwards;
  pointer-events: none;
  opacity: 1;

}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}
      <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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The current SVG layers don't play well with what you're trying to accomplish. Your SVG is basically 3 layers: 2 circles and the inverse of the X symbol. It would be much easier if the SVG was 2 layers: a circle border and the X symbol. I made that new SVG so I can showcase what I mean and hopefully accomplish what you need. If you still need a background color with this new one you can use CSS (and I included an example). Code below.

const manageUI = (function makeManageUI() {
  const body = document.body;

  function animationEndHandler(evt) {
    const animationName = evt.animationName;

    if (animationName === "fadingOut") {
      fadeReset();
    }
  }

  function resetPage() {
    body.classList.add("fadingOut");
  }

  function exitClickHandler() {
    resetPage();
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener("click", exitClickHandler);
    });
  }

  function init() {
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
    body.addEventListener("animationend", animationEndHandler);
  }

  return {

    init
  };
}());


const players = (function coverUIPlayerFacade() {
  function init() {
    manageUI.init({});
  }
  return {
    init
  };
}());

players.init();
.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  animation: fadeInExit 0s forwards 0s;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }
  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg,
.fadingOut .exit svg {
  fill: green;
}

.fadingOut .exit {
  animation: fadeOutExit 5s forwards;
  pointer-events: none;
  opacity: 1;
}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}
<button class="exit" type="button" aria-label="Close">
  <!-- New SVG code -->
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 286 286">
    <g id="exit">
      <path class="cross" d="M232.46 74.8a113.41 113.41 0 0 0-21.22-21.22l-68.58 68.59-68.59-68.59A113.41 113.41 0 0 0 52.85 74.8l68.59 68.58L52.85 212a113.35 113.35 0 0 0 21.22 21.21l68.59-68.58 68.58 68.58A113.35 113.35 0 0 0 232.46 212l-68.59-68.59Z"/>
      <path class="circle-frame" fill="red" d="M243.88 41.65a143 143 0 1 0 0 202.7l.47-.47a143 143 0 0 0-.47-202.23Zm11.8 105.68v.79a112.39 112.39 0 0 1-23 63.62l-.06.08A113.41 113.41 0 0 1 211.35 233l-.08.06a112.36 112.36 0 0 1-63.62 23h-.79c-1.35.05-2.71.08-4.08.08s-2.73 0-4.08-.08h-.79a112.39 112.39 0 0 1-63.62-23l-.08-.06A113.41 113.41 0 0 1 53 211.82l-.06-.08a112.39 112.39 0 0 1-23-63.62v-.79c-.05-1.35-.08-2.71-.08-4.08s0-2.73.08-4.08v-.79a112.36 112.36 0 0 1 23-63.62l.06-.08a113.41 113.41 0 0 1 21.18-21.25l.08-.06a112.39 112.39 0 0 1 63.62-23h.79c1.35-.05 2.71-.08 4.07-.08 1.36 0 2.72 0 4.07.08h.79a112.39 112.39 0 0 1 63.62 23l.08.06a113.41 113.41 0 0 1 21.22 21.22l.06.08a112.39 112.39 0 0 1 23 63.62v.79c0 1.35.08 2.7.08 4.06v.07c.1 1.36.07 2.73.02 4.06Z"/>
    </g>
  </svg>
  <!-- New SVG code end -->
</button>

<button class="exit" type="button" aria-label="Close">
  <!-- Update viewBox -->
  <svg width="100%" height="100%" viewBox="0 0 286 286">
    <use href="#exit" />
  </svg>
</button>

<button class="exit" type="button" aria-label="Close">
  <!-- Update viewBox -->
  <svg width="100%" height="100%" viewBox="0 0 286 286">
    <use href="#exit" />
  </svg>
</button>

<button class="exit" type="button" aria-label="Close">
  <!-- Update viewBox -->
  <svg width="100%" height="100%" viewBox="0 0 286 286">
    <use href="#exit" />
  </svg>
</button>

<br>
<br> Static SVG with background color CSS:
<br>
<!-- SVG with background color CSS -->
<svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 286 286" style="background:blue;border-radius:50%;">
  <g id="exit">
    <path class="cross" fill="green" d="M232.46 74.8a113.41 113.41 0 0 0-21.22-21.22l-68.58 68.59-68.59-68.59A113.41 113.41 0 0 0 52.85 74.8l68.59 68.58L52.85 212a113.35 113.35 0 0 0 21.22 21.21l68.59-68.58 68.58 68.58A113.35 113.35 0 0 0 232.46 212l-68.59-68.59Z"/>
    <path class="circle-frame" fill="red" d="M243.88 41.65a143 143 0 1 0 0 202.7l.47-.47a143 143 0 0 0-.47-202.23Zm11.8 105.68v.79a112.39 112.39 0 0 1-23 63.62l-.06.08A113.41 113.41 0 0 1 211.35 233l-.08.06a112.36 112.36 0 0 1-63.62 23h-.79c-1.35.05-2.71.08-4.08.08s-2.73 0-4.08-.08h-.79a112.39 112.39 0 0 1-63.62-23l-.08-.06A113.41 113.41 0 0 1 53 211.82l-.06-.08a112.39 112.39 0 0 1-23-63.62v-.79c-.05-1.35-.08-2.71-.08-4.08s0-2.73.08-4.08v-.79a112.36 112.36 0 0 1 23-63.62l.06-.08a113.41 113.41 0 0 1 21.18-21.25l.08-.06a112.39 112.39 0 0 1 63.62-23h.79c1.35-.05 2.71-.08 4.07-.08 1.36 0 2.72 0 4.07.08h.79a112.39 112.39 0 0 1 63.62 23l.08.06a113.41 113.41 0 0 1 21.22 21.22l.06.08a112.39 112.39 0 0 1 23 63.62v.79c0 1.35.08 2.7.08 4.06v.07c.1 1.36.07 2.73.02 4.06Z"/>
  </g>
</svg>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

@wouch: totally agree – simplifying the svg structure can facilitate all transformations.

Here is an alternative approach using <circles> and <lines> for additianal stroke-width adjusting.

const manageUI = (function makeManageUI() {
  const body = document.body;

  function animationEndHandler(evt) {
    const animationName = evt.animationName;

    if (animationName === "fadingOut") {
      fadeReset();
    }
  }

  function resetPage() {
    body.classList.add("fadingOut");
  }

  function exitClickHandler() {
    resetPage();
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener("click", exitClickHandler);
    });
  }

  function init() {
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
    body.addEventListener("animationend", animationEndHandler);
  }

  return {

    init
  };
}());


const players = (function coverUIPlayerFacade() {
  function init() {
    manageUI.init({});
  }
  return {
    init
  };
}());

players.init();
/* save stroke-width to var */
:root {
  --stroke-width: 10%;
}

.symbol-circle {
  /* prevent circe to inherit hover stroke color */
  stroke: red;
  fill: none;
}

.exit svg {
  clip-path: circle(50%);
  line-height: 0px;
  transition: 0.3s;
}
.exit use {
  stroke: red;
  transition: 0.5s;
  stroke-width: var(--stroke-width);
  r: calc(50% - var(--stroke-width) / 2);
}
.exit.exit-bg:hover svg {
  background-color: yellow;
}
.exit.exit-bg:hover use {
  stroke-width: 20%;
}

.exit:hover use,
.fadingOut .exit use {
  stroke: green;
}

/* animations */
@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }
  100% {
    pointer-events: initial;
    opacity: 1;
  }
}
.fadingOut .exit {
  animation: fadeOutExit 5s forwards;
  pointer-events: none;
  opacity: 1;
}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}
/* just resets */
svg {
  font-size: 10em;
  width: 1em;
  height: 1em;
  display: inline-block;
  line-height: 0px;
}

button {
  background-color: transparent;
  padding: 0.5em;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}

/* hide svg assets */
#svgAssets {
  display: none;
}
<svg id="svgAssets" viewBox="0 0 100 100">
  <symbol id="symbol-circleCross"  >
    <line class="symbol-stroke" id="stroke1" x1="0%" y1="0%" x2="100%" y2="100%"  />
    <line class="symbol-stroke" id="stroke2" x1="0%" y1="100%" x2="100%" y2="0%"  />
    <circle class="symbol-stroke symbol-circle" id="circle" cx="50%" cy="50%" r="45%"  />
  </symbol>
</svg>

<button class="exit" type="button" aria-label="Close">
  <svg>
    <use href="#symbol-circleCross" />
  </svg>
</button>

<button class="exit exit-bg" type="button" aria-label="Close">
  <svg >
    <use href="#symbol-circleCross"/>
  </svg>
</button>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

This example also illustrates the specificity of svg elements. e.g.
A <path id="path" fill="red" d="..." /> element already containing a fill="" attribute cannot be overridden by something like <use href="#path" fill="red" />.

Page link：https//www.codepudding.com/os/194111.html

Prev:How to add value for android drawable file for button stored in a varible programatically?
Next:How to make Intellj Idea write dependencies into POM files?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding