【发布时间】：2016-07-29 23:23:34
【问题描述】：
我想知道如何在一张图片中渲染 SVG 路径和 div 元素。
例子：
<div class="objects ui-droppable ui-sortable">
<div class="b_s _jsPlumb_endpoint_anchor _jsPlumb_connected" id="start_block">START</div>
<div class="b_1 block ui-draggable ui-draggable-handle _jsPlumb_endpoint_anchor _jsPlumb_connected" id="n_block4" title="test"><span>test</span></div>
<div class="b_s _jsPlumb_endpoint_anchor _jsPlumb_connected" id="end_block">STOP</div><div class="_jsPlumb_endpoint _jsPlumb_endpoint_anchor jsplumb-draggable jsplumb-droppable" style="display: block; width: 10px; height: 0px; position: absolute; left: 530px; top: 52px; background: transparent;"></div>
<div class="_jsPlumb_endpoint _jsPlumb_endpoint_anchor jsplumb-draggable jsplumb-droppable" style="display: block; width: 10px; height: 0px; position: absolute; left: 529.5px; top: 82px; background: transparent;"></div>
<svg style="position:absolute;left:519.5px;top:48px" width="20" height="38" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector"><path d="M 0.5 -1 L 0.5 31 M 1.5 30 L -0.75 30 M 0.25 31 L 0.25 -1 M 1.25 0 L -1 0 M 0 0 L 0 30 " transform="translate(9.999999999999998,4)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="rgb(7,152,216)" style="" stroke-width="2"></path><path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M4.684274006738627e-16,32.650000000000006 L10.000000000000002,7.650000000000007 L1.4221210955098638e-15,17.075000000000006 L-9.999999999999998,7.650000000000005 L4.684274006738627e-16,32.650000000000006" class="" stroke="rgb(7,152,216)" fill="rgb(7,152,216)" transform="translate(9.999999999999998,4)"></path></svg>
<div class="_jsPlumb_endpoint _jsPlumb_endpoint_anchor jsplumb-draggable jsplumb-droppable" style="display: block; width: 10px; height: 0px; position: absolute; left: 529.5px; top: 126px; background: transparent;"></div>
<div class="_jsPlumb_endpoint _jsPlumb_endpoint_anchor jsplumb-draggable jsplumb-droppable" style="display: block; width: 10px; height: 0px; position: absolute; left: 530px; top: 156px; background: transparent;"></div>
<svg style="position:absolute;left:520px;top:122px" width="20" height="38" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector"><path d="M 0 -1 L 0 31 M -1 30 L 1.25 30 M 0.25 31 L 0.25 -1 M -0.75 0 L 1.5 0 M 0.5 0 L 0.5 30 " transform="translate(9.499999999999998,4)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="rgb(7,152,216)" style="" stroke-width="2"></path><path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M0.5000000000000004,32.650000000000006 L10.500000000000002,7.650000000000007 L0.5000000000000014,17.075000000000006 L-9.499999999999998,7.650000000000005 L0.5000000000000004,32.650000000000006" class="" stroke="rgb(7,152,216)" fill="rgb(7,152,216)" transform="translate(9.499999999999998,4)"></path></svg>
</div>
当前 JS 代码：
$("#btnExp").click(function() {
//Canvas Count
var CCount = 1;
//prekopiramo vse elemente v nov div. Vmes SVG pretvorimo v canvas.
$("body").append("<div class='ghost_img'></div>");
//Gremo cez vse elemente. Jih pripnemo v ghost_img, svg->canvas canvas pozicioniramo kot svg.
$(".objects").find("*").each(function(index) {
var object = $(this);
//Ce je DIV ga kloniramo
if(this.tagName=='DIV'){
$(".ghost_img").append(object.clone());
//Ce je SVG dobimo kordinate, ga transformiramo v canvas in pripnemo, canvasu dodamo -> style: position:absolute, top:y, left:x
}else if(this instanceof SVGElement){
$(".ghost_img").append("<canvas id='c"+CCount+'></canvas>');
var position = $(this).position();
//alert(position.left + ", top: "+ position.top);
var oSerializer = new XMLSerializer();
var sXML = oSerializer.serializeToString(object);
canvg(document.getElementById('c'+CCount), sXML);
$('#c'+CCount).css("position","absolute");
$('#c'+CCount).css("top",position.top);
$('#c'+CCount).css("left",position.left);
CCount = CCount+1;
}
});
//Renderamo celoten ghost_img
html2canvas($(".ghost_img"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
}
});
});
使用上面的代码，每个元素都被渲染，但图片不正确。 How elements get rendered，how they should render。
编辑上面#1 的代码：好的，这就是我的想法。我想将所有元素附加到一个幽灵 div，同时将它们一一附加我会将 svgs 转换为画布。我还将为我创建的画布设置位置（左，上）和绝对位置。然后我想渲染整个ghost div。
演示链接：Demo
【问题讨论】：
-
您能否提供一个包含css的工作示例。
-
我在上面添加了演示链接。
-
看来你的问题来自你的svgs的绝对定位。 canvg 和 html2canvas 都不能渲染这些。我认为将您带到某些库不是一个好习惯，所以我现在将其作为评论留下，但使用
SVG2Bitmap.js（免责声明：我写了它）我能够让您的 svg 呈现：jsfiddle.net/ubtycqg4/1 主要问题但是，画布现在将在 IE中受到污染 -
演示不适合我。我收到此错误：无法导出 svg，请检查传递的 svgElement 是否为有效的 svg 文档。
标签： javascript php jquery canvas svg