动画 Snap SVG - s.group 不是函数

Question

出于某种原因，当我尝试使用 snap.svg 进行分组时，我得到：

Uncaught TypeError: s.group is not a function

无论我怎么尝试，我都无法让它工作！就好像 Snap.SVG 根本不起作用，但我的 Snap("#wrapper");工作正常吗？

我的代码如下：

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>

Answer 1

主要问题可能是 Snap 需要 SVG 元素，而不是 DIV 元素（不像 Raphael，你可以给它一个 DIV）。尝试将 id 'wrapper' 移动到 SVG（或给它一个不同的名称并使用它）。

动画 Snap SVG - s.group 不是函数

Animated Snap SVG - s.group is not a function

svg

jquery-animate

svg-animate

snap.svg