如何使用mask实现蓝色永久透明且保留X按钮hover效果

核心逻辑 #

要实现要求的效果只需要两步：

1. 通过SVG定义mask遮罩，仅保留X形区域可见，其余区域永久透明
2. 利用CSS mask特性，遮罩的透明区域默认不会触发hover等指针事件，自然保留仅X区域响应交互的效果

如果需要调整蓝色区域的透明度，直接修改蓝色路径的opacity属性即可，不会影响遮罩和交互效果。

代码修改 #

1. CSS修改 #

在原有.exit选择器中新增mask相关属性，其余原有属性保留即可：

.exit {
  /* 原有属性不变，新增以下内容 */
  -webkit-mask: url(#xMask);
  mask: url(#xMask);
  mask-size: cover;
  -webkit-mask-size: cover;
}

2. HTML修改 #

在第一个SVG标签内新增mask定义，修改后的SVG结构如下：

<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <!-- 新增mask定义 -->
    <defs>
      <mask id="xMask">
        <!-- 白色部分为可见区域，仅保留X形路径 -->
        <path fill="#fff" 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>
    </defs>
    <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代码保持原有逻辑不变即可 -->

内容的提问来源于stack exchange，提问作者user17382064