我正在使用PhantomJS + d3在服务器上呈现SVG.我能够在内部使用d3创建的SVG返回整个页面的HTML,但是如果我尝试只返回SVG,那么我会回来null.
var page = require('webpage').create();
page.content = '<html><body></body></html>';
page.includeJs('http://d3js.org/d3.v3.min.js', function() {
var html = page.evaluate(function() {
var body = d3.select('body');
var svg = body.append('svg');
svg.append('rect');
svg.append('circle');
return body.html();
});
console.log(html);
phantom.exit();
});
退货<script src="http://d3js.org/d3.v3.min.js"></script><svg><rect></rect><circle></circle></svg>.
但是,如果我更改return body.html()到return svg.html(),null被返回.
我正在使用PhantomJS 1.9.8和d3.v3.js. 关于为什么我不能选择svg的任何想法？
实际上,我现在可以回答我自己的问题:SVG不支持innerHTML,因此d3 .html()不起作用.来自d3维基:
注意:顾名思义,selection.html仅支持HTML元素.SVG元素和其他非HTML元素不支持innerHTML属性,因此与selection.html不兼容.考虑使用XMLSerializer将DOM子树转换为文本.另请参阅innersvg polyfill,它提供了一个shim来支持SVG元素的innerHTML属性.
使用XMLSerializer解决了这个问题:
var page = require('webpage').create();
page.content = '<html><body></body></html>';
page.includeJs('http://d3js.org/d3.v3.min.js', function() {
var html = page.evaluate(function() {
var body = d3.select('body');
var svg = body.append('svg');
svg.append('rect');
svg.append('circle');
var s = new XMLSerializer();
return s.serializeToString(document.querySelector('svg'));
});
console.log(html);
phantom.exit();
});