用作遮罩图像时，SVG 无法正确显示

Question

我有一个 SVG，我试图将其用作包含多个笔划的蒙版图像，但是当用作蒙版图像时，不会显示笔划。

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='green' stroke-width='2.5' d='M2 0v1072.9M44.75 0v1072.9' %3E%3C/path%3E%3Cpath stroke='green' 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");
  }
}

<main></main>

Answer 1

目前您的蒙版 SVG 是完全不透明的。
由于默认的 mask-mode

match-source

，元素不会根据较暗的刻度“刻度”的亮度进行缩放。

您可以将遮罩模式更改为

mask-mode: luminance

，但您可能还应该删除白色背景

<path>

.masked {
  background-color: #000;
  display: block;
  width: 500px;
  height: 500px;
  mask-mode: luminance;
  mask-size: contain;
  mask-repeat: no-repeat;
  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='green' stroke-width='2.5' d='M2 0v1072.9M44.75 0v1072.9' %3E%3C/path%3E%3Cpath stroke='green' 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");
}

.masked2 {
  background-color: #000;
  display: block;
  width: 500px;
  height: 500px;
  mask-mode: luminance;
  mask-size: contain;
  mask-repeat: no-repeat;
  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 stroke='green' stroke-width='2.5' d='M2 0v1072.9M44.75 0v1072.9' %3E%3C/path%3E%3Cpath stroke='green' 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");
}

<div class="masked"></div>
<div class="masked2"></div>