SVG路径:模式填充在Firefox和Safari中不起作用

Question

>SVG路径元素在Firefox和Safari中不起作用，但它在Chrome中工作。 为什么路径不使用 Firefox 和 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

图像上没有高度属性。SVG 2 允许省略宽度/高度。Blink 和 Firefox 已经实现了 SVG 2 的这一部分。

矩形上还有一个冗余填充(当您将图案填充应用为样式时(

<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>