Javascript 如何在不显示SVG介绍的情况下将SVG转换为画布？_Javascript_Svg

Javascript 如何在不显示SVG介绍的情况下将SVG转换为画布？

javascript svg

Javascript 如何在不显示SVG介绍的情况下将SVG转换为画布？,javascript,svg,Javascript,Svg,我使用JS将SVG作为外部文件引入，并将其转换为canvas。但是有一个问题，引入的SVG必须作为节点添加到页面中，并且必须处于非隐藏状态才能生效。但是，我只想显示画布而不显示SVG节点，整个代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ti

我使用JS将

SVG

作为外部文件引入，并将其转换为

canvas

。但是有一个问题，引入的

SVG

必须作为节点添加到页面中，并且必须处于非隐藏状态才能生效。但是，我只想显示画布而不显示

SVG

节点，整个代码如下：

<!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>


svgToCanvas
函数svgToCanvas（）
{
var embedTag=document.createElement（'embed'）；
embeddetag.type=“image/svg+xml”；
EmbeddeTag.src=“../img/svg/tiger.svg”；
EmbeddeTag.onload=函数（）
{
var svg1=embedTag.getSVGDocument（）；
var node1=svg1.getElementById（“tiger1”）；//tiger1是的id值，位于文件../img/svg/tiger.svg中。
var node1Text=node1.outerHTML.trim（）；
尝试
{
var svgWidth=node1.attributes.width.value；
var svgHeight=node1.attributes.height.value；
EmbeddeTag.width=svgWidth；
embeddeTag.height=svgWidth；
var canvas1=document.getElementById（“canvasId”）；
canvas1.width=svgWidth；
canvas1.height=svgWidth；
canvg（canvas1，node1Text）；
}
捕获（错误）
{
console.error（'svg标记必须添加width=“841”height=“800”或相似性，否则将为空'）；
}
};
document.getElementById（“dv”）.appendChild（embedTag）；
}
按钮

谢谢。

使用

标记而不是

。然后，您就可以访问内容文档，前提是链接的文件填充了整个文档

或者，您可以通过XHR简单地解析文件：

fetch("../img/svg/tiger.svg")
    .then(response => response.text)
    .then(str => {
        var svgDOM = new DOMParser().parseFromString(str, "image/svg+xml");
        //....
    });

将svg粘贴到高度为0、溢出隐藏的div中如何？我认为这仍然算是可见的，但不会向用户显示任何内容……思维方向良好，yahwoo~成功<代码>就是这样。非常感谢。我没有使用

JS

的

XMLHttpRequest

，所以我不太理解它，但我认为这是思考这个问题的正确方式，但我已经解决了它，所以我暂时不必学习如何使用

XMLHttpRequest

，谢谢。（通过它的方法）和都应该允许访问内容（尽管两者可能很快都会被弃用，所以人们应该更喜欢它们）。以及关于需要在文档中可见的相同限制。这里只有DOMParser可以工作。

fetch("../img/svg/tiger.svg")
    .then(response => response.text)
    .then(str => {
        var svgDOM = new DOMParser().parseFromString(str, "image/svg+xml");
        //....
    });