Текстовая заливка SVG не заполняется указанным цветом

Question

У меня есть SVG-текст и маска (анимация маски позже), которые я изначально хотел бы иметь заливку белым цветом. Однако, когда я устанавливаю заливку на белый цвет, текст пропадает, как если бы цвет был прозрачным. Вот соответствующий код ...

svg {
  margin: 0;
  color: rgba(255, 255, 255, 1);
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
}

rect {
  -webkit-mask: url(#mask);
  mask: url(#mask);
  fill: #f00;
}

defs {
  mask {
    text {
      font-size: 8vw;
      /* Using black to illustrate text fill isn't updating */
      fill: #000;
    }
  }
}

#editText {
  @media screen and (max-width: 480px) {
    transform: translateY(-10%);
  }
}

<svg preserveAspectRatio="xMinYMin meet">
  <defs>
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <rect x="0" y="0" width="100%" height="100%"></rect>
      <text x="50%" y="50vh" text-anchor="middle">
        Text line 1
      </text>
      <text
        id="editText"
        x="50%"
        y="65vh"
        text-anchor="middle"
      >
        Text line 2
      </text>
    </mask>
  </defs>
  <rect x="0" y="0" width="100%" height="100%"></rect>
</svg>

Вот как это выглядит локально ...

Вот как это должно выглядеть (с белый текст вместо прозрачного)

Я пробовал комбинацию штрихов, цветов и градиентов в текстовом элементе, но безуспешно. Есть идеи, где я ошибаюсь?

Answer 1

Если я правильно понимаю, вы хотите использовать маску, чтобы вырезать прямоугольник с формой текста, чтобы вы могли видеть, что находится под этим вырезом. Если это так, то основная проблема, которую я вижу, связана с селекторами css. У вас есть один селектор для всех rect элементов на странице, который включает элемент маски. Я думаю, вам нужно убедиться, что вы воздействуете только на те элементы, на которые хотите повлиять. Например, вы можете использовать селекторы id и class:

svg {
  margin: 0;
  color: rgba(255, 255, 255, 1);
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
}

#background{
  fill: #ff0;
}

#outrect {
  -webkit-mask: url(#mask);
  mask: url(#mask);
  fill: #f00;
}

.masktext{
  stroke: #000;
}
#maskrect{
  fill: #fff;
}

#editText {
  @media screen and (max-width: 480px) {
    transform: translateY(-10%);
  }
}

<svg preserveAspectRatio="xMinYMin meet">
  <defs>
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <rect id="maskrect" x="0" y="0" width="100%" height="100%"></rect>
      <text class="masktext" x="50%" y="50vh" text-anchor="middle">
        Text line 1
      </text>
      <text
        id="editText"
        class="masktext"
        x="50%"
        y="65vh"
        text-anchor="middle"
      >
        Text line 2
      </text>
    </mask>
  </defs>
  <rect id="background" x="0" y="0" width="100%" height="100%"></rect>
  <rect id="outrect" x="0" y="0" width="100%" height="100%"></rect>
</svg>

Я также добавил желтый прямоугольник под , чтобы увидеть эту прозрачность. Теперь вы можете модулировать прозрачность, изменив цвет .masktext и #maskrect.