2

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

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

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

未捕获的类型错误：对象 [对象对象] 没有方法“圆”

我对 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>
4

1 回答 1

3

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

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

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

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

jsfiddle在这里

    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>
于 2014-02-23T20:34:24.580 回答