<html
><svg width="960" height="500" id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"><g class="linz"><line class="bluelink" x1="480" y1="250" x2="334.8434764825239" y2="275.78849826638145"></line><rect x="397.42173824126195" y="252.89424913319073" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="407.42173824126195" y="262.8942491331907">101</text></g><g class="linz"><line class="bluelink" x1="480" y1="250" x2="619.1894601470176" y2="200.9990683994202"></line><rect x="539.5947300735088" y="215.4995341997101" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="549.5947300735088" y="225.4995341997101">2</text></g><g class="linz"><line class="bluelink" x1="480" y1="250" x2="434.983433226373" y2="390.53065260546134"></line><rect x="447.4917166131865" y="310.26532630273067" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="457.4917166131865" y="320.26532630273067">2</text></g><g class="linz"><line class="bluelink" x1="480" y1="250" x2="585.5868329731418" y2="353.5574331993295"></line><rect x="522.7934164865709" y="291.7787165996648" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="532.7934164865709" y="301.7787165996648">119</text></g><g class="linz"><line class="bluelink" x1="480" y1="250" x2="499.47384868808143" y2="103.87072365281172"></line><rect x="479.73692434404074" y="166.93536182640585" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="489.73692434404074" y="176.93536182640585">2</text></g><g class="linz"><line class="bluelink" x1="480" y1="250" x2="373.73145030208514" y2="147.4006224017257"></line><rect x="416.86572515104257" y="188.70031120086287" width="20" height="20" style="fill: black; stroke: skyblue;"></rect><text class="link-label" font-family="Arial, Helvetica, sans-serif" fill="white" dy=".35em" text-anchor="middle" x="426.86572515104257" y="198.70031120086287">5</text></g><g class="node" transform="translate(334.8434764825239,275.78849826638145)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">111</text></g><g class="node" transform="translate(619.1894601470176,200.9990683994202)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">999</text></g><g class="node" transform="translate(434.983433226373,390.53065260546134)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">222</text></g><g class="node" transform="translate(585.5868329731418,353.5574331993295)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">XXX</text></g><g class="node" transform="translate(499.47384868808143,103.87072365281172)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">444</text></g><g class="node" transform="translate(373.73145030208514,147.4006224017257)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/call.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">333</text></g><g class="node" transform="translate(480,250)"><circle r="10.392304845413264" style="fill: white;"></circle><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/target.png" x="-17" y="-17" height="30" width="30"></image><text dy="2.6em">Main</text></g></svg>关于使用给定代码转换到 Canvas
var svgText = document.getElementById("myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
function drawInlineSVG(ctx, rawSVG, callback) {
var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
domURL = self.URL || self.webkitURL || self,
url = domURL.createObjectURL(svg),
img = new Image;
img.onload = function () {
ctx.drawImage(this, 0, 0);
domURL.revokeObjectURL(url);
callback(this);
};
img.src = url;
}
// usage:
drawInlineSVG(ctxt, svgText, function() {
console.log(canvas.toDataURL()); // -> PNG
alert("see console for output...");
});虽然图像和链接显示在 svg 上，但 Canvas 上没有显示链接或图像。 如何添加 jpg/svg/print/pdf 功能？
最佳答案
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/akhilsahu/saveSvgAsPngJpgSvg/master/svg.js"></script>保存SvAsPngJpgSvg.js
https://github.com/akhilsahu/saveSvgAsPngJpgSvg
太容易使用了。
可以调用简单的函数来执行此操作。
svgAsPngUri(document.getElementById(svgid), {}, function(uri)
{
document.querySelector('#png-container').innerHTML = '<img id="getimg" style="display:none" src="'+uri+'"/>';
var sampleImage = document.getElementById("getimg"),
canvas = convertImageToCanvas(sampleImage);
// Actions
document.getElementById("canvasHolder").appendChild(canvas);
});Canvas 已添加。您看不到它是隐藏的。 在这里 fiddle click
关于javascript - 将 Svg 绘制到 Canvas ，包括嵌入在 svg 中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37278044/