SVG用作mask-image时描边（stroke）无法显示的问题求助

架构老林

2026-6-26

问题原因

CSS mask-image 对SVG的渲染逻辑是基于像素亮度/透明度：

白色（#fff）区域：完全显示下方内容
黑色区域：完全隐藏下方内容
其他颜色按亮度对应半透明效果

你SVG里的描边用了stroke='green'，浏览器会将绿色转换为灰度值，这个灰度的亮度不足以让描边在遮罩中显现；另外伪元素的content: "", ;是语法错误，会干扰元素渲染。

修复方案

修正伪元素的content语法，改为content: "";
将SVG中所有stroke='green'替换为stroke='%23fff'（URL编码后的白色#fff）
保留SVG的fill='none'，避免填充区域干扰遮罩效果

修复后的CSS代码：

main {
  position: relative;
  flex: 1;
  padding: 140px 60px 0 140px;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 32px;
    height: 100%;
    content: "";
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='1073' fill='none' viewBox='0 0 46 1073'%0A%3E%3Cpath fill='%23fff' d='M43.75 0H1116.75V41H43.75z' transform='rotate(90 43.75 0)' %3E%3C/path%3E%3Cpath stroke='%23fff' stroke-width='2.5' d='M2 0v1072.9M44.75 0v1072.9' %3E%3C/path%3E%3Cpath stroke='%23fff' stroke-miterlimit='10' stroke-width='2.5' d='M16.75 1071.65h27.28M29.84 1057.55h14.1M29.84 1043.45h14.1M29.84 1029.35h14.1M29.84 1015.24h14.1M16.66 1001.14h27.28M29.84 986.04h14.1M29.84 971.94h14.1M29.84 957.83h14.1M29.84 943.73h14.1M16.66 929.63h27.28M29.84 914.53h14.1M29.84 900.42h14.1M29.84 886.32h14.1M29.84 872.22h14.1M16.66 858.12h27.28M29.84 843.01h14.1M29.84 828.91h14.1M29.84 814.81h14.1M29.84 800.71h14.1M16.66 786.61h27.28M29.84 771.5h14.1M29.84 757.4h14.1M29.84 743.3h14.1M29.84 729.2h14.1M16.66 715.1h27.28M29.84 699.99h14.1M29.84 685.89h14.1M29.84 671.79h14.1M29.84 657.69h14.1M16.66 643.59h27.28M29.84 628.48h14.1M29.84 614.38h14.1M29.84 600.28h14.1M29.84 586.18h14.1M16.66 572.08h27.28M29.84 556.97h14.1M29.84 542.87h14.1M29.84 528.77h14.1M29.84 514.67h14.1M16.66 500.57h27.28M29.84 485.46h14.1M29.84 471.36h14.1M29.84 457.26h14.1M29.84 443.16h14.1M16.66 429.06h27.28M29.84 413.95h14.1M29.84 399.85h14.1M29.84 385.75h14.1M29.84 371.65h14.1M16.66 357.55h27.28M29.84 342.44h14.1M29.84 328.34h14.1M29.84 314.24h14.1M29.84 300.14h14.1M16.66 286.04h27.28M29.84 270.93h14.1M29.84 256.83h14.1M29.84 242.73h14.1M29.84 228.63h14.1M16.66 214.53h27.28M29.84 199.42h14.1M29.84 185.32h14.1M29.84 171.22h14.1M29.84 157.12h14.1M16.66 143.02h27.28M29.84 127.91h14.1M29.84 113.81h14.1M29.84 99.71h14.1M29.84 85.61h14.1M16.66 71.5h27.28M29.84 56.4h14.1M29.84 42.3h14.1M29.84 28.2h14.1M29.84 14.09h14.1' %3E%3C/path%3E%3C/svg%3E");
    /* 测试时可添加背景色查看效果，实际使用可移除 */
    background: #000;
  }
}

额外说明

若需要半透明描边遮罩，可使用stroke='%23888'（URL编码的灰色），亮度越低，遮罩透明度越高
伪元素必须设置background才能看到遮罩效果，因为遮罩是作用在元素背景/内容上的

内容的提问来源于stack exchange，提问作者The Interactive DOM