SVG is not showing correctly, when used as mask-image

I have an SVG that I am trying to use as mask-image that includes multiple strokes, however when being used as mask-image, the strokes aren't shown.

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>

Solution

Currently your mask SVG is fully opaque.
Due to the default mask-mode match-source the element is not masked according to the luminance of the darker scale "ticks".

You can change the mask-mode to mask-mode: luminance but propably you should also delete the white background <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>

Basically, you can interpret transparency either by

luminance values: white/light=opaque; black/dark=transparent; gray=semi-transparent
alpha: existing opacity/transparency in image

body {
  background: #ccc;
}

.masked {
  background-color: green;
  top: 0;
  left: 0;
  display: block;
  width: 20%;
  height: 500px;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='1073' fill='none' viewBox='0 0 46 1073'><path fill='%23fff' d='M43.75 0H1116.75V41H43.75z' transform='rotate(90 43.75 0)'></path><path stroke='green' stroke-width='2.5' d='M2 0v1072.9M44.75 0v1072.9'></path><path 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'></path></svg>");
}

.masked-match-source {
  mask-mode: match-source;
}

.masked-luminance {
  mask-mode: luminance;
}

.masked-luminance2 {
  mask-mode: luminance;
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='1073' fill='none' viewBox='0 0 46 1073'><path fill='black'  d='M43.75 0H1116.75V41H43.75z' transform='rotate(90 43.75 0)'></path><path stroke='green' stroke-width='2.5' d='M2 0v1072.9M44.75 0v1072.9'></path><path stroke='white' 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'></path></svg>");
}

.masked-alpha {
  mask-mode: alpha;
}

.masked-alpha2 {
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='1073' fill='none' viewBox='0 0 46 1073'><path fill='%23fff' fill-opacity='0' d='M43.75 0H1116.75V41H43.75z' transform='rotate(90 43.75 0)'></path><path stroke='green' stroke-width='2.5' d='M2 0v1072.9M44.75 0v1072.9'></path><path 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'></path></svg>");
}

<p>mask-mode: match-source/alpha: No effect because we don't have any transparency</p>
<div class="masked masked-match-source"></div>
<div class="masked masked-alpha"></div>

<p>mask-mode: luminance: Black/dark color= transparent; White/light color= opaque; Gray/semi-dark=semi-transparent</p>
<p>Scale ticks are semitransparent due to green color ("semi-dark" color). Background rect is opaque due to white fill</p>
<div class="masked masked-luminance"></div>
<p>Scale ticks are semitransparent due to green color ("semi-dark" color). Background rect is transparent due to black fill</p>
<div class="masked masked-luminance2"></div>

<p>Scale ticks are opaque due to white color. Background rect is transparent due to black fill</p>
<div class="masked masked-alpha2"></div>