SVG mẫu mâu thuẫn giữa chrome và firefox

Question

Tôi có một gradient bao phủ một màu (màu đỏ) quy định như một mô hình:

<svg width="480" height="480"> 
    <defs> 

     <pattern width="1" height="1" x="0" y="0" id="pattern"> 
      <rect width="240" height="240" x="0" y="0" fill="rgba(255,0,0,1)"/> 
      <rect width="240" height="240" x="0" y="0" fill="url(#gradient)"/> 
     </pattern> 

     <linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0"> 
      <stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="1"/> 
      <stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0"/> 
     </linearGradient> 

    </defs> 
    <path 
     transform="matrix(1,0,0,1,200,200)" 
     d="M0 0M 120 0 A 120 120 0 0 0 -120 0 A 120 120 0 0 0 120 0" 
     fill="url(#pattern)" 
    /> 
</svg> 

Left: Firefox. Bên phải: Chrome

Một bên phải (Chrome) là đúng.

Có ai biết cách thực hiện công việc này trong Firefox không?

Xem nó sống: http://jsbin.com/eyenoh/edit#html,live

Answer 1

tôi đã có thể để có được nó làm việc bằng cách sử dụng các đối tượng hộp bounding như phối hợp hệ thống về nội dung mẫu.

<pattern width="1" height="1" x="0" y="0" id="pattern" patternContentUnits="objectBoundingBox"> 
    <rect width="1" height="1" x="0" y="0" fill="rgba(255,0,0,1)"/> 
    <rect width="1" height="1" x="0" y="0" fill="url(#gradient)"/> 
</pattern> 

Xem nó ở đây: http://jsbin.com/efesev/edit#html,live

Tôi sẽ cố gắng để điều tra thêm. Có vẻ như một ứng cử viên tốt cho một báo cáo lỗi.