SVG path : pattern fill not working in firefox and Safari

Question

SVG path element not working in Firefox and Safari but it works in Chrome. Why doesn't the path filled using pattern in Firefox and Safari?

<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
	<defs>
		<pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userSpaceOnUse">
			<image width="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
		</pattern>
	</defs>
	<path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0  0,0  0,100" fill="#ff0000;" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
</svg>

Answer 1

There is no height attribute on the image. SVG 2 allows width/height to be omitted. Blink and Firefox have implemented this part of SVG 2.

You also have a redundant fill on the rect (as you're applying a pattern fill as a style)

<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
      <defs>
        <pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userspaceOnUse">
           <image width="600" height="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
        </pattern>
      </defs>
        
      <path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0  0,0  0,100" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
        
    </svg>