Question

SVG路径元素在Firefox和Safari中不起作用，但它适用于 Chrome 。为什么在Firefox和Safari中使用模式填充路径？

＆＃13;

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

＆＃13;

Answer 1

图像上没有高度属性。 SVG 2允许省略宽度/高度，但到目前为止只有Blink实现了SVG 2的这一部分。

您还在矩形上有一个冗余填充（因为您正在将图案填充应用为样式）

＆＃13;

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

＆＃13;

SVG路径：模式填充在Firefox和Safari中无法正常工作

1 个答案: