CODEWITHSUNDEEP
svgjquery-animatesnap.svgsvg-animate
KiwisTasteGood
KiwisTasteGood

Reputation: 178

Animated Snap SVG - s.group is not a function

For some reason when I try to make a group using snap.svg I get:

Uncaught TypeError: s.group is not a function

No mater what I try I cannot get it to work! It's as if Snap.SVG isn't working at all but my Snap("#wrapper"); works fine?

My Code is below:

index.js

s = Snap("#wrapper");
var text = s.selectAll("#text");
var text3group = s.group(text);

HTML:

<html>
  <head>
    <meta charset="UTF-8">
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
        <link rel="stylesheet" href="css/style.css">
  </head>

  <body>

<div id="wrapper">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;}
  #Layer_2{fill:#FFF}
    .st2{font-size:40px;font-family: "proxima-nova",sans-serif;}
  .bold{
    font-weight:900;
  }
</style>
<g id="text">
<text id="XMLID_2_" transform="matrix(1 0 0 1 47 177.0039)">
  <tspan x="-20" y="0" class="st1 st2 bold">90%</tspan>
  <tspan x="74" y="0" class="st3 st2"> of the data in the world today has </tspan>
  <tspan x="15" y="50" class="st3 st2">been created in </tspan>
  <tspan x="305" y="50" class="st4 st2 bold">the last two years</tspan>
  <tspan x="640" y="50" class="st3 st2">.</tspan>
</text>
</g>
</svg>
</div>
        <script src="js/index.js"></script>
  </body>
</html>

Upvotes: 1

Views: 991

Answers (1)

Ian
Ian

Reputation: 13842

Main problem is likely that Snap needs an SVG element, not a DIV element (unlike Raphael where you can give it a DIV). Try moving the id 'wrapper' to the SVG (or give it a different name and use that).

Upvotes: 2

Related Questions