PhantomJS not capturing <rect> SVG element on screenshots

I'm trying to use PhantomJS to capture screenshots of various SVG/HTML docs. I'm having an issue where the screenshot isn't capturing the element of the SVG.

Here's the HTML that has the SVG code that's not working. Note that the text elements of the SVG are showing up. In this doc the are the elements giving the boxes their blue border, and those are what's not showing up on the screenshot. https://pastebin.com/EdQQdUkD

Here's what I believe to be the offending code:

<rect stroke-dasharray="0" stroke-width="2" ry="2" rx="2" height="60" width="100" stroke="#077bbe" fill="transparent" id="v-36"></rect> 

Here's a screenshot of what the SVG looks like when I render in a Chrome, Firefox, or Safari browser on Mac OSX: http://imgur.com/a/6oIWn

Here's a screenshot of what PhantomJS is generating upon screenshot: http://imgur.com/a/a79ke

Here's the PhantomJS code I'm using to capture the screenshot:

var page = require('webpage').create(), system = require('system'), url, output, width, height;  page.onResourceReceived = function(response) {     valid = [200, 201, 301, 302]     if(response.id == 1 && valid.indexOf(response.status) == -1 ){         console.log('Received a non-200 OK response, got: ', response.status);         phantom.exit(1);     } }  address = system.args[1]; output = system.args[2]; width = system.args[3]; height = system.args[4]; timeout = system.args[5];  console.log("Args: ", system.args); console.log("Screenshotting: ", address, ", to: ", output);  page.viewportSize = { width: parseInt(width), height: parseInt(height) }; console.log("Viewport: ", JSON.stringify(page.viewportSize));  page.open(address, function (status) {   if (status !== 'success') {     console.log('Unable to load the address!');     phantom.exit();   } else {     // Scroll to bottom of page, so all resources are triggered for downloading     window.setInterval(function() {       page.evaluate(function() {         console.log('scrolling', window.document.body.scrollTop);         window.document.body.scrollTop = window.document.body.scrollTop + 1024;       });     }, 255);      // scroll back to top for consistency, right in time (sometimes)     // logo's dissapear when scrolling down     window.setTimeout(function() {       page.evaluate(function() {         window.document.body.scrollTop = 0;       });     }, timeout - 5);      // after the timeout, save the screenbuffer to file     window.setTimeout(function() {       page.render(output);       phantom.exit();     }, timeout);   } }); 

I've tried this on PhantomJS versions 1.8, 1.9, 2.0, 2.1 and still the same problem.

0 Answers

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati