飞碟蜡染和跑步页脚不一起工作？答案

【问题标题】：Flying Saucer Batik and running footers dont work together?飞碟蜡染和跑步页脚不一起工作？
【发布时间】：2015-08-02 21:06:27
【问题描述】：

我有一个挑战给你们。我试图创建一个带有 SVG 图像的页脚的 xhtml 文档，然后将其呈现为 pdf。我使用飞碟和蜡染的组合来做到这一点。现在我了解到 Flying Saucer 支持运行页脚，例如

@page {
  @top { content: element(footer); }
}
footer { position: running(footer); }

这对我来说很好，但是当我使用 Batik 添加 SVG 图像时出现问题：

<html>
<head>
    <style type="text/css"> 
    .footer { position: running(footer); } 
    @page { @bottom-center { content: element(footer) } } 
    .header__logo {display: block; right: 0; top: 0; width: 150px; height: 54px; } 
    </style>
</head>
<body>
    <div class="footer">
        <img class='header__logo' src='someSRC.svg' />
        footer
    </div>
    <div class="content"> stuff </div>
</body>

看起来 Batik 在图像移动到页面底部之前对其进行了渲染。此外，它不会在任何地方显示“页脚”字样。有人知道怎么修这个东西吗？也许强迫蜡染稍后渲染或什么？我尝试将内部图像的位置设置为相对等，但这似乎真的搞砸了这个过程。

【问题讨论】：

标签： java css pdf flying-saucer batik

【解决方案1】：

我自己也遇到过类似的问题。尽管我仍然无法解决整个问题，但我至少设法让 SVG 显示：您绝对需要在 <img> 元素上添加 CSS 样式的高度和宽度（通过 class 或 style 属性）。如果没有这两个属性，则根本不会绘制 SVG（至少当您使用在网络上飞来飞去的示例代码时）。

在实现了渲染本身之后，我意识到 SVG 将相对于页面内容的左上角定位（意思是，不在您期望的页眉或页脚区域内）。此外，它只在第一页上绘制（而 PNG 图像没有这些问题）。

如果有人对此有有效的解决方案，请在此处发布。对我来说，不幸的是，这完全是在专业环境中使用飞碟的障碍。

编辑：

挖掘飞碟和 iText 的源代码，我发现了一个“变通办法”，它可能实际上为我解决了这个问题：如果您将 SVG 转换为 PDF，那么您可以直接将徽标包含为 PDF 而不是 SVG .看起来像 iText。因此，即使在页眉和页脚中也能正常使用的是这样的用法：

<img style="width: 30mm; height:8mm;" src="/img/my-funky-logo.pdf"/>

【讨论】：