未正确呈现带有wkhtmltopdf的SVG内容

在使用wkhtmltopdf和嵌入SVG图表的文件渲染PDF文件时，我遇到了一个奇怪的渲染问题

为了解决这个问题，我试图简化SVG和HTML内容，同时保持问题的可复制性。然而，在生产中，我不能（或者说我非常不想）更改SVG内容，因为它是从canvas2svg生成的

SVG是一个简单的折线图，至少有2个数据集（示例中有4个）

在屏幕上，SVG被渲染，而不是像素化

但在生成的PDF文件中，它得到了一些线像素化的渲染，使您想到的是光栅图像，而不是矢量图像

屏幕图像使用windows放大镜放大，而pdf在查看器中放大

通过改变图表中数据集的数量，我的结论是，只有最后一个数据集能够正确呈现

转换在没有任何附加参数的情况下完成，如下所示：

wkhtmltopdf.exe test.html test.pdf

测试文件如下：

test.svg：

test.html：

test.pdf：

---

任何能为我提供修复或解决方法的解释，或任何关于如何正确使用PDF的建议或想法，我都将不胜感激。

这不是一个真正的解决方案，但更多的是一种解决方法。老实说，我记不起我是如何找到它的（时间太长了，可能是通过修改SVG内容），但它就在这里

SVG内部有一些

剪辑路径

属性；诀窍就是把它去掉。我不是SVG专家，所以我无法解释为什么会这样

原始SVG如下所示：

wkhtmltopdf.exe test.html test.pdf

。。。
...
...

我的应用程序的流程如下：

• web应用程序显示带有嵌入式图表的报告
• 图表内容被发送回服务器以重新组装报表
• 该报告由wkhtmltopdf应用程序从html转换为PDF

因此，在重新组装SVG内容之前，我使用了以下方法：

String svgData=/*只需在此处获取图表数据，或者可能获取整个HTML内容*/；
字符串regex=“（\\sclip path=\\\”url\\（\\）[a-zA-Z]*（\\）\\”；
Matcher m=Pattern.compile（regex）.Matcher（svgData）；
while（m.find（））{
svgData=svgData.replace（m.group（0），“”）；
}   
//使用修改后的SVG数据

---

希望这能有所帮助。

我看到的是，您正在为svg使用

width

和

height

属性，而不是

viewBox

。请删除宽度和高度，然后添加

viewBox=“0 0 500”

，然后重试。感谢您提供的提示，但在我的情况下它不起作用。HTML文件在浏览器中正确显示，但转换为空PDF。。。我尝试了viewBox的不同值；不幸的是，同样的结果是：一个空的PDF。PDF的大小表明它确实是空的（viewBox为2k，宽度和高度为24k），你曾经在@stefanu解决过这个问题吗？我也有同样的问题，SVG在浏览器中呈现得非常完美，但在PDF中呈现得非常糟糕。@willsmanley，有点。。。这不是一个真正的解决方案，而是一个变通办法。我完全忘记了这件事；我很快就会发布解决方案。@willsmanley，请查看下面的完整详细信息。希望它能帮助你，或者至少能给你一个线索。