Javascript Snap.svg返回对象表示；“对象没有圆方法”；_Javascript_Svg_Snap.svg

Javascript Snap.svg返回对象表示；“对象没有圆方法”；

javascript svg

Javascript Snap.svg返回对象表示；“对象没有圆方法”；,javascript,svg,snap.svg,Javascript,Svg,Snap.svg,我试图用Snap包装现有的svg元素。当我尝试创建一个圆时，我得到一个错误： var e=document.getElementById（“svgId”） var-paper=Snap（e） var button1=纸圈（20,20,50）上述代码生成此错误：未捕获的TypeError:对象[Object Object]没有方法“circle” 我对js非常陌生，对svg更是如此。非常感谢您对此事的任何帮助以下演示会产生相同的错误： <!DOCTYPE html>`

我试图用Snap包装现有的svg元素。当我尝试创建一个圆时，我得到一个错误：

var e=document.getElementById（“svgId”）

var-paper=Snap（e）
var button1=纸圈（20,20,50）
上述代码生成此错误：
未捕获的TypeError:对象[Object Object]没有方法“circle”
我对js非常陌生，对svg更是如此。非常感谢您对此事的任何帮助
以下演示会产生相同的错误：
    <!DOCTYPE html>`
    <html>
    <head lang="en">
    <script type="text/javascript" src="snap.svg-min.js"></script>
    <script type="text/javascript">
        function init(){
            var e = document.createElement("svg");
            e.id = "demo";
            var paper = Snap(e);
            console.log(paper);
            var button1 = paper.circle(20,20,50);
            button1.attr({
                 fill:"#bbbb55",
                 stroke:"000",
                 strokeWidth: 3
            });
        }
    </script>
    </head>
    <body onload="init()">
    </body>
    </html>

`
函数init（）{
var e=document.createElement（“svg”）；
e、 id=“演示”；
var纸张=快照（e）；
控制台.日志（纸）；
var button1=纸圈（20,20,50）；
按钮1.attr({
填写：“BB55”，
笔画：“000”，
冲程宽度：3
});
}
我将在同一页上包含3个不同的示例，因为有时查看和比较这些示例很有用
第一个示例圆圈来自一个动态创建的svg元素，与您的示例类似（注意，您还需要将svg元素附加到示例的主体中，并且可能需要使用CreateElements）
第二个示例圆圈，来自正文中的svg标记
第三个例子是让Snap自己创建元素（通常是这样，或者使用svg元素，比如Snap（“容器”））

var e=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
e、 setAttribute（'style'，'border:1px纯黑色'）；
e、 setAttribute（'width'，'600'）；
e、 setAttribute（'height'，'250'）；
e、 id=“svg1”；
文件.正文.附件（e）；
var paper1=捕捉（“svg1”）//使用上面创建的元素
var按钮1=纸张1.圆圈（100100）；
按钮1.attr({
填充：“蓝色”，
笔画：“绿色”，
冲程宽度：3
});
var paper2=捕捉（“svg2”）//使用下面标记中的元素
var按钮2=纸张2.圆圈（100100）；
按钮2.attr({
填充：“红色”，
笔画：“黄色”，
冲程宽度：3
});
var paper3=快照（200200）//让捕捉创建元素
var按钮3=纸张3.圆圈（100100）；
按钮3.attr({
填充：“紫色”，
笔画：“银色”，
冲程宽度：3
});



你能发布一个演示来重现这个问题吗？我已经添加了上面的演示。我的错误是我试图针对的是
而不是。不过小提琴很有用。谢谢
    var e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    e.setAttribute('style', 'border: 1px solid black');
    e.setAttribute('width', '600');
    e.setAttribute('height', '250');
    e.id="svg1";
    document.body.appendChild( e );

    var paper1 = Snap( "#svg1" ); //use element created above
    var button1 = paper1.circle(100,100,100);
    button1.attr({
             fill:"blue",
             stroke:"green",
             strokeWidth: 3
            });

    var paper2 = Snap( "#svg2" ); //use element from markup below
    var button2 = paper2.circle(100,100,100);
    button2.attr({
             fill:"red",
             stroke:"yellow",
             strokeWidth: 3
            });

    var paper3 = Snap(200,200); //let Snap create element
    var button3 = paper3.circle(100,100,100);
    button3.attr({
             fill:"purple",
             stroke:"silver",
             strokeWidth: 3
            });

<body onload="init()">

<svg id="svg2" width="200" height="200">
    <circle r="20" cx="20" cy="20"/>
</svg>

</body>
</html>