SVG pattern inconsistency between chrome and firefox

Question

I have a gradient overlaying a solid color (red) defined as a pattern:

<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. Right: Chrome

Rule on the right (Chrome).

Does anyone know how to make this work in Firefox?

Watch it live: http://jsbin.com/eyenoh/edit#html,live

Answer 1

I managed to get it to work using the bounding object object as a coordinate system for the contents of the template.

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

See here: http://jsbin.com/efesev/edit#html,live

I will try to investigate further. Sounds like a good candidate for a bug report.