Question

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

var e = document.getElementById("svgId");
var paper = Snap(e); var button1 = paper.circle(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>

Answer 1

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

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

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

第3个例子圈，就是让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>

Snap.svg返回对象说“对象没有圆圈方法”

1 个答案: