如何在SVG遮罩（mask）中正确使用feComponentTransfer？

问题原因 #

SVG 的 <mask> 默认基于颜色亮度生成遮罩规则：白色（亮度值1）对应目标元素完全显示，黑色（亮度值0）对应完全隐藏。你通过 feFuncR/G/B 将滤镜输出设为纯黑后，无论 alpha 通道值如何，遮罩都会识别为完全透明区域，导致目标蓝色 div 完全无法显示。

解决方案 #

有两种可行的调整方式：

• 方法一：修改滤镜的 RGB 通道设置，将其设为白色，适配默认遮罩的亮度规则
• 方法二：给 <mask> 添加 mask-type="alpha" 属性，强制遮罩基于元素的 alpha 通道生效，忽略颜色亮度

方法一：调整滤镜RGB通道为白色 #

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
  <mask id="mask">
      <filter id="filter" x="0%" y="0%" width="100%" height="100%">
          <feTurbulence type="fractalNoise" baseFrequency="0.1" seed="5" />
          <feComponentTransfer>
              <feFuncA type="discrete" tableValues="0 0 0 1 1 1"/>
              <feFuncR type="discrete" tableValues="1"/>
              <feFuncG type="discrete" tableValues="1"/>
              <feFuncB type="discrete" tableValues="1"/>
          </feComponentTransfer>
      </filter>
      <rect x="0" y="0" width="100%" height="100%" filter="url(#filter)" fill="none" />
  </mask>
</svg>
<div style="width:150px; height:150px; background:blue; mask:url(#mask);"></div>

方法二：使用mask-type="alpha" #

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
  <mask id="mask" mask-type="alpha">
      <filter id="filter" x="0%" y="0%" width="100%" height="100%">
          <feTurbulence type="fractalNoise" baseFrequency="0.1" seed="5" />
          <feComponentTransfer>
              <feFuncA type="discrete" tableValues="0 0 0 1 1 1"/>
              <feFuncR type="discrete" tableValues="0"/>
              <feFuncG type="discrete" tableValues="0"/>
              <feFuncB type="discrete" tableValues="0"/>
          </feComponentTransfer>
      </filter>
      <rect x="0" y="0" width="100%" height="100%" filter="url(#filter)" fill="none" />
  </mask>
</svg>
<div style="width:150px; height:150px; background:blue; mask:url(#mask);"></div>

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