应用SVG图像遮罩时图片莫名出现透明度的问题咨询

SVG <mask> 默认启用亮度遮罩模式（mask-mode: luminance），该模式下的遮罩计算逻辑和Alpha通道完全无关，仅靠遮罩内容的亮度值决定底层元素的显示强度：纯白对应100%不透明，纯黑对应完全隐藏，所有带色彩的不透明填充，都会根据自身亮度折算成对应的透明比例。

你当前遮罩里的两个路径填充色是 #F71A3A 高饱和红色，折算下来亮度值仅约0.3，也就是说路径覆盖的区域，图片只有30%左右的不透明度，自然会出现和设计不符的半透明效果。

• 切换为Alpha遮罩模式
  给<mask>标签追加属性 mask-mode="alpha"。该模式下遮罩强度仅判断内容的Alpha通道，和填充色没有关系——只要路径是不透明填充，就能实现100%的显示强度，不需要修改原有路径的填充值。
• 调整遮罩路径的填充色
  把两个遮罩路径的fill属性从#F71A3A改为#ffffff纯白。在默认的亮度遮罩模式下，纯白的亮度值为1，可达到100%不透明的遮罩效果。

注意：使用亮度遮罩时，所有用于定义形状的遮罩内容，必须用纯白填充，否则一定会出现非预期的半透明渲染问题。

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