PDF的渐变背景

时间:2015-06-04 17:12:37

标签: xsl-fo

有没有办法使用FO为我的PDF添加渐变背景?它也可能是背景图像,并不重要。但我想添加到页面,而不仅仅是身体区域。

1 个答案:

答案 0 :(得分:2)

当然可以。 On会创建一个SVG图像,它匹配他们想要的渐变。对于这个例子,我使用从黄色到红色,从左到右的线性渐变。

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" height="1in" width="8.5in">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect width="8.5in" height="1in" fill="url(#grad1)" />
</svg>

然后,将其作为页面之前区域的背景图像插入,并将页面范围设置为页面的完整高度:

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:svg="http://www.w3.org/2000/svg"
    font-family="Times" font-size="16px">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="backgrad" page-width="8.5in" page-height="11in">
            <fo:region-body/>
            <fo:region-before extent="11in" background-image="backgrad.svg"/>
        </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="backgrad">
        <fo:flow flow-name="xsl-region-body">
            <fo:block>
                Hello
            </fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>

结果如下:

enter image description here