2016-04-29 41 views
0

出於某種原因,當我嘗試做一團使用snap.svg我得到:動畫捕捉SVG - s.group不是一個函數

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> 

回答

1

主要問題可能是捕捉需要一個SVG元素,而不是一個DIV元素(不像拉斐爾在那裏你可以給它一個DIV)。嘗試將id'wrapper'移動到SVG(或者給它一個不同的名稱並使用它)。