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

【问题标题】：Animated Snap SVG - s.group is not a function动画 Snap SVG - s.group 不是函数
【发布时间】：2016-08-24 09:51:31
【问题描述】：

由于某种原因，当我尝试使用 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>

【问题讨论】：

标签： svg jquery-animate snap.svg svg-animate

【解决方案1】：

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

【讨论】：