Hi

I'm trying to draw a simple SVG linear gradient. But the following code does not return what I expected:

<svg width="12cm" height="4.5cm" viewBox="0 0 1200 450">
	<defs>
		<linearGradient id="grad1" x1="0" y1="0" x2="0" y2="450" gradientUnits="userSpaceOnUse">
			<stop offset="0" style="stop-color:#9EAFD9" />
			<stop offset="0.5" style="stop-color:#FFFFFF" />
			<stop offset="1" style="stop-color:#E1E183" />
		</linearGradient>
	</defs>
	<rect width="1200" height="450" style="fill:url(#grad1);stroke-width:0" />
</svg>

1) the colors are in the wrong order
2) the gradient should be from top to bottom. But is only on a small area.

Any suggestions how to make a smooth gradient? Without "userSpaceOnUse" it is even worse...

1. expected.JPG‎ 12.3 kB ‎
   What I want (Screenshot Firefox)
2. prince.JPG‎ 14.8 kB ‎
   How it looks with Prince

It seems to work for me, see attached PDF below.

Which Prince version are you running, and on which operating system?

1. gradient.pdf‎ 2.7 kB

ok!

It seems to be a bug of the inegrated pdf-viewer in Firefox 39.0! When I open your PDF there it looks bad. But when I open the PDF in Acrobat, everything is fine.

Thanks!

@ueli, you could tell the pdf.js project about this bug. I think they would be happy to hear about something that doesn't work and this could help them to make their viewer better.