javascript - canvg nested and floated SVG element does not appear in canvas output

Question

I'm having an issue with canvg. I can't get it to render a right-floated element.

The trick I'm using to float elements on the right side of this d3 plot (svg elements do not actually support css float) is to create a nested svg with x=100%, then use negative x values on sub-elements to shift them back into the viewable area.

As you can see in this fiddle, canvg is not rendering the contents of badContainer.

http://jsfiddle.net/ujdaLfh7/3/

Thanks.

var width = 500;
var height = 500;

var graph = {   
    "relationshipTypes": [{   "displayName": "Inheritance",  "code":"is_a"}],   
}

var svg = d3.select("#content").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("id","mysvg");

var goodContainer = svg.append("svg")
    .attr("x",50)
    .attr("y",0)
    .attr('width',100)
    .attr('height',100)
    .style("overflow","visible");

var rect = goodContainer.append("rect")
    .attr("width", 50)
    .attr("height", 50)
    .attr("x", 50)
    .attr("y", 50)
    .attr("fill","red")
    .attr("stroke","#555");

console.log('canvg test');

var badContainer = svg.append("svg")
    .attr("class","badContainer")
    .attr("x","100%")
    .attr("y",150)
    .style("overflow","visible");

var legendBg=badContainer
    .append('rect')
    .attr("fill","cyan")
    .attr("stroke","#555")
    .attr("width", 150)
    .attr("height", 150)
    .attr("x",-150)
    .attr("y",-150+10);

var $container = $('#content'),
    content = $container.html().trim();
console.log(content);
canvas = document.getElementById('mycanvas');

// Draw svg on canvas
canvg(canvas, content);

// Change img be SVG representation
var theImage = canvas.toDataURL('image/png');
$('#myimg').attr('src', theImage);

Edit:

As a workaround to this issue I ended up positioning the legend box using a function that sets the x position of the child svg, along with an angular.js directive that watches for window resize.

Still though, if anyone knows how to get canvg to draw stuff that's positioned outside the svg area, I will accept your answer.