PhantomJS 网页#render 不显示包含在网页#content 中的 javascript 生成的 SVG答案

【问题标题】：PhantomJS webpage#render doesn't show javascript generated SVG which is included in webpage#contentPhantomJS 网页#render 不显示包含在网页#content 中的 javascript 生成的 SVG
【发布时间】：2013-04-17 14:08:06
【问题描述】：

这是我的 PhantomJS 脚本：https://gist.github.com/beckyconning/5404506

这是页面中包含的javascript：https://gist.github.com/beckyconning/5404532

这是相关的 HTML：

<div id="participant-overview-chart"></div>

图表显示在所有浏览器中，并且 svg 包含在 pages#content 的输出中，但它不会显示在 PhantomJS 的 pages#render 创建的文件中。

如果我将生成的 SVG 手动包含到显示的 div 中，但我需要自动生成这些图形。

我已经尝试注入 jQuery 并运行 $(document).ready 并且我当前的 PhantomJS 脚本中包含超时。我不知道接下来该尝试什么哈哈！

感谢您提供有关调试此问题的任何帮助或指示：)

【问题讨论】：

标签： javascript pdf svg phantomjs

【解决方案1】：

在 PhantomJS 中，jQuery 从 $().height() 返回一个不准确的值；

手动设置 Raphael 绘图上下文的宽度和高度，而不是从元素的高度（以像素为单位）来解决问题。

var chart_container = $('#participant-overview-chart');
var chart_width = 529; //chart_container.height();
var chart_height = 529; //chart_container.height();
var r = Raphael(chart_container[0], 529, 529);

我会尝试使用非普通的 javascript 方式从元素中获取像素尺寸，如果可行，我会更新它。

调试 PhantomJS PDF 缺少元素错误的 Protip：将网页渲染为 PNG。这样可以在透明背景下显示文档，这可以帮助您找到元素隐藏的位置。

【讨论】：