SVG文件无法作为CSS Mask使用，图片被完全隐藏问题咨询

使用外部SVG文件作为CSS Mask时，图片被完全隐藏，但单独加载SVG路径正常，内联data:image/svg+xml格式的SVG可正常作为Mask生效，内联样式引用SVG能看到预览但Mask仍无效。

• 给SVG文本设置黑色填充：CSS Mask依赖图形的透明度/亮度值，SVG文本默认填充在Mask上下文会被识别为透明，导致整个区域被遮罩隐藏。需给<text>标签添加fill="black"。
• 补全CSS Mask属性与前缀：仅使用-webkit-mask存在兼容性局限，需添加标准mask属性，同时明确mask的尺寸与定位，确保和容器匹配。
• 优化SVG的尺寸定义：使用viewBox替代固定宽高，让SVG自适应容器，避免尺寸不匹配导致的遮罩失效。

调整后的SVG（1.svg） #

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 250">
    <text x="0" y="180" font-family="Cambria, sans-serif" font-size="250" fill="black">
        Text masking
    </text>
</svg>

修改后的HTML/CSS #

<!DOCTYPE html>
<html>
    <head>
        <style>
            #testDiv
            {
                display: inline-block;
                /* 补全前缀与属性，确保尺寸匹配 */
                mask: url("1.svg") 100% 100% / 100% 100% no-repeat;
                -webkit-mask: url("1.svg") 100% 100% / 100% 100% no-repeat;
            }
        </style>
    </head>
    <body>
        <div id="testDiv">
            <img id="test" src="1.png" style="height: 250px; width: 1500px; object-fit: cover;">
        </div>
        <img src="1.svg">
    </body>
</html>

如果仍有问题，可检查：

• SVG文件是否存在跨域问题（本地测试一般无此问题，服务器环境需确保SVG和页面同域）
• 浏览器控制台是否有资源加载报错，确认SVG路径绝对正确

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