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 允许省略 width/height 但目前只有 Blink 实现了 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>

SVG 路径：图案填充在 Firefox 和 Safari 中不起作用

SVG path : pattern fill not working in firefox and Safari

firefox

svg

design-patterns

image

fill