PhantomJS网页#gradp不显示javascript生成的SVG，它包含在网页#content中

Question

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

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

这是相关的HTML：

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

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

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

我尝试过注入jQuery并运行$（document）.ready，并且我当前的PhantomJS脚本中包含一个超时。我不知道下一步该怎么办！

感谢您对调试此问题的任何帮助或指示：）

Answer 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方式从元素中获取像素尺寸，如果有效，我会更新它。

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