Анимированная привязка SVG - s.group не является функцией

По какой-то причине, когда я пытаюсь создать группу с помощью 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>
Источник

1 ответ

Решение

Основная проблема, вероятно, заключается в том, что Snap нуждается в элементе SVG, а не в элементе DIV (в отличие от Рафаэля, где вы можете указать ему DIV). Попробуйте переместить идентификатор "обертка" в SVG (или дать ему другое имя и использовать его).

Источник
Другие вопросы по тегам