1

我遇到了canvg的问题。我无法让它呈现一个右浮动的元素。

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

正如你在这个小提琴中看到的，canvg 没有渲染 badContainer 的内容。

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

谢谢。

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 区域之外的东西，我会接受你的回答。

4

0 回答 0