html - cssでコンテナを2つの異なるコンテナとブレンドするにはどうすればよいですか

Question

私はコンテナを持っていて、mix-blend-mode: の違いを適用して、その親コン​​テナと親コンテナの親コンテナ (など) とブレンドしたいと考えています。ブレンドモードを適用すると、コンテナはその親コン​​テナとのみブレンドされます。前に説明した結果をどのように達成できますか。

コード構造は次のようになります。

.sec1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
}
.sec2 {
  position: absolute;
  left: 0;
  top: 100vh;
  width: 100vw;
  height: 100vh;
  background-color: white;
}
.svg1 {
  position: fixed;
  ...
}

<section class="sec1">
  <section class="sec2">
    <svg class="svg1" ...>
      <text ... style="...;mix-blend-mode:difference;"></text>
    </svg>
  </section>
</section>

前もって感謝します。