Snap.svg 返回对象说“对象没有圆形方法”答案

【问题标题】：Snap.svg return object says "Object has no circle method"Snap.svg 返回对象说“对象没有圆形方法”
【发布时间】：2014-02-23 05:39:43
【问题描述】：

我正在尝试使用 Snap 包装现有的 svg 元素。当我尝试创建一个圈子时，我收到一个错误：

var e = document.getElementById("svgId");
var paper = Snap(e); var button1 = paper.circle(20,20,50);

上面的代码会产生这个错误：

Uncaught TypeError: Object [object Object] has no method '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>

【问题讨论】：

你能发布一个演示来重现这个问题吗？
我已经添加了上面的demo。

标签： javascript svg snap.svg

【解决方案1】：

我将在同一页面上包含 3 个不同的示例，因为它有时有助于查看和比较...

第一个示例圆圈来自与您的示例类似的动态创建的 svg 元素（注意，您还需要在示例中将 svg 元素附加到正文，并且可能使用 createElementNS）。

第二个示例圆圈，来自正文中的 svg 标记。

第三个示例圆，是让Snap自己创建元素（通常的方式，或者使用svg元素，比如Snap("#container")）。

jsfiddle here

    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>

【讨论】：

我的错误是我试图定位 <div> 而不是 <svg>。小提琴虽然很有帮助。谢谢！