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＆＃39;包装器＆＃39;到SVG（或给它一个不同的名称并使用它）。

Animated Snap SVG - s.group不是一个函数

1 个答案: