How to animate filling svg path from bottom with content?

Question

I'm looking for a cross-browser solution for filling an svg path with a color. The solution below works already with Chrome but faces issues with other browsers. Namely Edge, Firefox, Opera and safari

I further would like not to use clip-mask.

  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
  }
  
  .v1 {
    fill: #d81920;
  }
  
  .v1.stroke {
    fill: rgba(0, 0, 0, 0);
    stroke: #d81920;
    stroke-width: 7
  }
  
  .clip {
    animation: slide 5s forwards cubic-bezier(0.47, 0, 0.745, 0.715)
  }
  
  @keyframes slide {
    100% {
      transform: translateY(-100%);
    }
  }

<svg height="200px" width="200px" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1122.52 793.70667"
  height="793.70667" width="1122.52" xml:space="preserve" version="1.1">

            <defs>
                <clipPath id="cut">
                    <rect x="100" y="670" width="850" height="600" class="clip"/>
                </clipPath>
            </defs>


            <g transform="matrix(1.3333333,0,0,-1.3333333,0,793.70667)" >
                <g transform="translate(306.5302,96.3909)">
                    <path class="v1 stroke" d="M 0,0 H -161.076 L -47.644,402.498 H 113.432 Z" ></path>
                </g>
                <g transform="translate(583.0042,96.3909)">
                    <path class="v1 stroke" d="M 0,0 H -161.076 L -47.644,402.498 H 113.432 Z" ></path>
                </g>
            </g>
            <g clip-path="url(#cut)">
                <g transform="matrix(1.3333333,0,0,-1.3333333,0,793.70667)" >
                    <g transform="translate(306.5302,96.3909)">
                        <path class="v1" d="M 0,0 H -161.076 L -47.644,402.498 H 113.432 Z" ></path>
                    </g>
                    <g transform="translate(583.0042,96.3909)">
                        <path class="v1" d="M 0,0 H -161.076 L -47.644,402.498 H 113.432 Z" ></path>
                    </g>
                </g>
            </g>
</svg>