Are there any alternative solutions to “overflow: hidden” does not take effect on “position: fixed”?

example DOM

<main>
<div id="mask"><svg></svg></div>
<div></div>
</main>

example CSS

svg{
  position: fixed;
}
main,
div {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
main {
  overflow-y: auto;
}

<svg> is fixed to the viewport, and every div is a page. I want <svg> be clipped by div#mask, like Parallax Scrolling.

<svg> is for js animations, so background-attach doesn’t fit this need.

<svg> has position: fixed;, so overflow: hidden doesn’t fit this need.