CODEWITHSUNDEEP
javascriptsvg
warldge
warldge

Reputation: 11

How to convert SVG into Canvas without displaying the introduction of SVG?

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.

Upvotes: 1

Views: 135

Answers (1)

ccprog
ccprog

Reputation: 21876

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");
        //....
    });

Upvotes: 1

Related Questions