Forum How do I...?

SVG linear gradient

ueli
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.JPG12.3 kB
    What I want (Screenshot Firefox)
  2. prince.JPG14.8 kB
    How it looks with Prince
mikeday
It seems to work for me, see attached PDF below.

Which Prince version are you running, and on which operating system?
  1. gradient.pdf2.7 kB
ueli
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!
mn4367
@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.