Linear gradient when using url in fill attribute not working

[vomc]

Hi,

I am not sure what I am doing wrong so any advice is appreciated. When I add an SVG with a linear gradient defined like the below to a PDF I just get black backgrounds. Adding something like fill="red" of course works. Is it that the gradient is not computed correctly or is it that fill does not support the url(#foo) syntax?

<svg width="300" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="1" x2="0" y1="0" y2="0">
<stop offset="0%" stop-color="hsl(200deg, 100%, 1%)" />
<stop offset="50%" stop-color="hsl(200deg, 100%, 50%)" />
<stop offset="100%" stop-color="hsl(200deg, 100%, 100%)" />
</linearGradient>
</defs>
<rect x="0" y="0" width="300" height="30" fill="url(#gradient)" />
</svg>

[vomc]

Closing this as I found a solution which is to not use hsl colors, this seems to work

<svg width="300" height="30" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="a" x1="1" x2="0" y1="0" y2="0">
<stop offset="0%" stop-color="black"/>
<stop offset="50%" stop-color="#0af"/>
<stop offset="100%" stop-color="white"/>
</linearGradient>
</defs>
<path fill="url(#a)" d="M0 0h300v30H0z"/></svg>