Forum Bugs

Strange parallelogram when using SVG gradients

phihag
I've a simple SVG file with a linear gradient:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="40">
  <defs>
    <linearGradient id="gradient">
      <stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" />
      <stop style="stop-color:#ff0000;stop-opacity:0;" offset="1"/>
    </linearGradient>
  </defs>
  <rect style="fill:url(#gradient);" width="140" height="30" x="5" y="5" />
</svg>

Download: http://phihag.de/2011/prince/svg-gradient.svg

In prince 8.0 beta 1, this outputs:

http://phihag.de/2011/prince/svg-gradient.pdf



For reference, imagemagick, inkscape, and Chrome render it like this:

mikeday
We don't support stop-opacity yet, so it should render as a solid red rectangle in every PDF viewer except for xpdf. :)
skycaptain
I'm wondering if this problem was solved, since the user guide lists support for stop-opactiy as of version 8, but the example still renders as a solid red rectangle.
mikeday
Oops, this is a mistake in the user guide! Sorry about that; currently the only way to get opacity in gradients is to render them to a PNG or TIFF image.
skycaptain
Thanks for clearing that up. Is there any chance of getting this feature in the near future?
mikeday
Not in the near future, no. It requires some heavy lifting to get this effect in PDF unfortunately.
skycaptain
Ok, thank you very much for that information. I've already started writing a javascript for acrobat, which replaces all png-placeholders with their equivalent eps-files
mikeday
It took a while, but we now have a latest build which supports stop-opacity in gradients!