Question

我遇到了canvg的问题。我不能让它渲染一个右浮动的元素。

我用来浮动这个d3图右侧的元素（svg元素实际上不支持css float）的技巧是创建一个x = 100％的嵌套svg，然后在子上使用负x值元素将它们移回可见区域。

正如你在这个小提琴中看到的那样，canvg不会渲染badContainer的内容。

感谢。

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);

编辑：

作为解决此问题的方法，我最终使用一个设置子svg x位置的函数以及一个监视窗口大小调整的angular.js指令来定位图例框。

尽管如此，如果有人知道怎么让canvg画出位于svg区域之外的东西，我会接受你的回答。

canvg嵌套和浮动的SVG元素不会出现在画布输出中

0 个答案: