Bug?: TypeError: s.circle is not a function

Craig Ugoretz

unread,

Jul 29, 2015, 5:00:22 PM7/29/15

to Snapsvg

I am learning how to load an SVG file into an HTML document in order to use SNAP.SVG.

Here is the SVG file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   viewBox="0 0 744.09448819 1052.3622047"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="inkscape-drawing.svg">
<defs
     id="defs4" />
<sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="-299.28571"
     inkscape:cy="520"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1691"
     inkscape:window-height="1002"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="0" />
<metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
</metadata>
<g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       style="fill:#0000ff;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 60,60 250,0 0,250 -250,0 z"
       id="rect3336"
       inkscape:connector-curvature="0" />
</g>
</svg>

Here is the HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="snap.svg.js"></script>
<script src="snap.svg.zpd.js"></script>
<script>
    window.onload = function () {
           var s = Snap("#theDiv");
    Snap.load("inkscape-drawing2.svg", function(f) {
        s.append(f);
        var square = s.select("#rect3336")
        console.log(square);
        square.attr({fill:"red"});
        console.log(square);

        // Determine if the square is a closed shape
        var squarePathString = square.attr("d");
        console.log(squarePathString);
        var squarePathStringLen = squarePathString.length-1;
        console.log(squarePathStringLen);
        var closedCharacter = squarePathString[squarePathStringLen];
        console.log(closedCharacter);
        var isClosed = closedCharacter == 'z' || closedCharacter == 'Z'
        console.log(isClosed);

        // Gets coordinates for a circle some distance along the square (1/4 perimeter increments)
        var pathLength = Snap.path.getTotalLength(square);
        console.log(pathLength);
        var circleIndex = 2;
        var totalCircleIndex = 4;
        var circleAlongPathLen = (circleIndex*
                                  pathLength/
                                  (isClosed ? totalCircleIndex : totalCircleIndex-1));

        // Draw the above circle
        var point = Snap.path.getPointAtLength(square,circleAlongPathLen);
        console.log(point);
        var circle = s.circle(point.x,point.y,50);
        circle.attr({"fill-opacity": "0"});
        circle.attr({stroke:"green"});
        circle.attr({"stroke-width": "3"});
        console.log(circle);


        // drag = false means that the whole screen gets dragged, not
        // individual objects
        s.zpd({ zoom: true, pan: true, drag: false, zoomScale: 0.2 });
        document.onkeydown = function (e) {
               console.log(e.keyCode);
            switch(e.keyCode) {
                case 84: // 't'
                    console.log("toggle");
                    s.zpd("toggle"); // can or can not drag
                    break;
              }
        };

        // s.zoomTo(2,1);
        console.log(s.outerSVG());
    })}
</script>
</head>

<body>
<div id = "theDiv"></div>
</body>
</html>

I am getting an error after this line:

        var circle = s.circle(point.x,point.y,50);

The error:

        TypeError: s.circle is not a function

Is this a bug in SNAP.SVG?

        By the way, I was included the SVG inline in the HTML file, and all of this worked just fine.

index3.html

inkscape-drawing2.svg

Craig Ugoretz

unread,

Jul 29, 2015, 5:04:27 PM7/29/15

to Snapsvg, craigu...@gmail.com

P.S. Here is the original file that did work:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

</head>
<body>

    // Get paper, get square, fill square red
    var s = Snap("#svg2");
    console.log(s);

</script>
</body>
</html>

index2.html

Ian

unread,

Jul 30, 2015, 2:43:01 AM7/30/15

to Snapsvg, craigu...@gmail.com

Snap takes an svg element, not a div element, so I'm guessing its not initialised correctly with out that.

Ian

Reply all

Reply to author

Forward