CODEWITHSUNDEEP
javascriptsvgsnap.svg
Artmole
Artmole

Reputation: 143

How to create a line with snap.svg - s.line is not a function

I am trying to create a simple line, but it does not register s.line as a function, and i cannot see what i am doing wrong here. My code is posted below. Thanks!

<html>
<head>

    <style type="text/css">
    #svg{
        width: 700px;
        height: 700px;
        background-color: #ccc;
    }
    </style>
</head>
<body>
<div id="svg"></div>
<script src="snap.svg-min.js"></script>
<script>
    var s = Snap("#svg");
    var metric = 24;
    var ground = s.line(50,350,650,350);   

</script>
</body>

Upvotes: 2

Views: 1614

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

You have to draw on a <svg> element, not a <div>

<html>
<head>

    <style type="text/css">
    #svg{
        width: 700px;
        height: 700px;
        background-color: #ccc;
    }
    </style>
</head>
<body>
<svg id="svg"></svg>
<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<script>
    var s = Snap("#svg");
    var metric = 24;
    var ground = s.line(50,50,650,50);
    ground.attr({
      stroke: "red",
      strokeWidth: 10
    });

</script>
</body>

Upvotes: 6

Related Questions