How to convert SVG into Canvas without displaying the introduction of SVG?
Question
I use JS to introduce SVG as an external file and turn it into canvas . But there is a problem that the introduced SVG must be added to the page as a node, and it must be in a non-hidden state to take effect. However, I want to just display the canvas without SVG node, the whole code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>svgToCanvas</title>
<link rel="shortcut icon" type="image/x-icon" href="../img/ico/one.ico" />
<script src="../js/jquery/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
<script type="text/javascript">
function svgToCanvas()
{
var embedTag = document.createElement('embed');
embedTag.type = "image/svg+xml";
embedTag.src = "../img/svg/tiger.svg";
embedTag.onload = function()
{
var svg1 = embedTag.getSVGDocument();
var node1 = svg1.getElementById("tiger1"); // tiger1 is <svg>'s id value, <svg> is in file ../img/svg/tiger.svg.
var node1Text = node1.outerHTML.trim();
try
{
var svgWidth = node1.attributes.width.value;
var svgHeight = node1.attributes.height.value;
embedTag.width = svgWidth;
embedTag.height = svgWidth;
var canvas1 = document.getElementById("canvasId");
canvas1.width = svgWidth;
canvas1.height = svgWidth;
canvg(canvas1, node1Text);
}
catch (error)
{
console.error('svg tag must add width="841" height="800" or likeness, Otherwise, it gets null.');
}
};
document.getElementById("dv").appendChild(embedTag);
}
</script>
</head>
<body>
<button onclick="svgToCanvas();">button</button>
<hr />
<canvas id="canvasId" ></canvas>
<hr />
<div style="" id="dv"></div>
</body>
</html>
Thank you.
1 answers
solution1
1 2020-09-02 15:06:05
Use an <object> tag instead of <embed> . Then you have access to the content document, provided the linked file fullfills the same-origin policy .
var embedTag = document.createElement('object');
embedTag.type = "image/svg+xml";
embedTag.data = "../img/svg/tiger.svg"; //sic
embedTag.onload = function()
{
var svgDOM = embedTag.contentDocument;
//...
};
Alternatively, you can simply fetch the file via XHR and parse it:
fetch("../img/svg/tiger.svg")
.then(response => response.text)
.then(str => {
var svgDOM = new DOMParser().parseFromString(str, "image/svg+xml");
//....
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.