wkhtmltopdf缺少SVG路径(渲染) [英] wkhtmltopdf missing SVG paths (Rendering)
问题描述
我正在HMTL代码中使用图像，如下所示:
I'm using a image inside the HMTL code like here below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<svg height="291pt" version="1.1" viewBox="0 0 291 291" width="291pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css">*{stroke-linecap:butt;stroke-linejoin:round;} </style> </defs> <g id="figure_1"> <g id="patch_1"> <path d="M 0 291.4 L 291.4 291.4 L 291.4 0 L 0 0 z" style="fill:none;"></path> </g> <g id="axes_1"> <g id="line2d_1"> <path clip-path="url(#p6e64365aaf)" d="M 268.427273 145.7 L 207.063636 251.984936 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id="line2d_2"> <path clip-path="url(#p6e64365aaf)" d="M 248.397453 148.307103 L 199.306544 233.335052 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id="line2d_3"> <path clip-path="url(#p6e64365aaf)" d="M 207.063636 251.984936 L 84.336364 251.984936 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id="line2d_4"> <path clip-path="url(#p6e64365aaf)" d="M 84.336364 251.984936 L 22.972727 145.7 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id="line2d_5"> <path clip-path="url(#p6e64365aaf)" d="M 92.093456 233.335052 L 43.002547 148.307103 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id="line2d_6"> <path clip-path="url(#p6e64365aaf)" d="M 22.972727 145.7 L 84.336364 39.415064 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id="line2d_7"> <path clip-path="url(#p6e64365aaf)" d="M 84.336364 39.415064 L 207.063636 39.415064 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id="line2d_8"> <path clip-path="url(#p6e64365aaf)" d="M 96.609091 55.457845 L 194.790909 55.457845 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id="line2d_9"> <path clip-path="url(#p6e64365aaf)" d="M 207.063636 39.415064 L 268.427273 145.7 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> </g> </g> <defs> <clipPath id="p6e64365aaf"> <rect height="270" width="270" x="10.7" y="10.7"></rect> </clipPath> </defs></svg>
</body>
</html>
当我使用wkhtmltopdf将其转换为PDF时，缺少一些SVG路径.有人遇到过同样的问题吗?一些解决此问题的方法?
When I'm using the wkhtmltopdf to convert it to PDF, some of the SVG paths is missing. Has anyone had the same problem? Some workaround to this issue?
我尝试在代码中单独使用相对路径，完整路径，base64源和SVG(如示例中所示).
I tried using the relative path, full path, base64 source and the SVG by itself within the code (as in the example).
wkhtmltopdf版本:0.12.4
wkhtmltopdf version: 0.12.4
推荐答案
所以不是确切的解决方案，但是更好的替代方法是在无头模式下使用chrome
So not a exact solution but a far better alternative now is to use a chrome in headless mode
$ chrome --headless --disable-gpu --print-to-pdf test.html
[0427/011400.636954:WARNING:dns_config_service_posix.cc(174)] dns_config has unhandled options!
[0427/011400.638406:ERROR:gpu_process_transport_factory.cc(1007)] Lost UI shared context.
[0427/011400.801881:INFO:headless_shell.cc(586)] Written to file output.pdf.
如果您想更好地控制该过程，则可以使用NodeJS和 puppeteer
Also if you want better control on the process, you would use NodeJS and puppeteer
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
await page.pdf({path: 'hn.pdf', format: 'A4'});
await browser.close();
})();
这篇关于wkhtmltopdf缺少SVG路径(渲染)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
