Snap(…) – создает область для рисования или оборачивает существующий элемент SVG.

Имеет насколько вариантов использования.

Snap(width, height)

Создает область для рисования.

• width – ширина области;
• height – высота области;

Пример:

Создадим область для рисования размером 300 на 300 и нарисуем круг диаметром 100 центр которого будет совпадать с центом области для рисования.

(function($) {
  var s = Snap(300, 300);
  var bigCircle = s.circle(150, 150, 100);
})(jQuery);

[codepen_embed height=”350″ theme_id=”dark” slug_hash=”MbqGbO” default_tab=”js,result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/MbqGbO/’>MbqGbO</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Snap(DOM)

Оборачивает существующий элемент SVG.

• DOM – элемент, который будет обернут в состав оснастки

Пример:

Разместим на странице тег <svg> c id=«circle». Зададим для этого элемента стили – ширину и высоту равными 300px. И с помощью Snap.SVG нарисуем круг диаметром 100 центр которого будет совпадать с элементом <svg>. Результат будет аналогичен предыдущему примеру.

[codepen_embed height=”350″ theme_id=”dark” slug_hash=”gLdzpO” default_tab=”js,result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/gLdzpO/’>gLdzpO</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Snap(array)

• array – массив элементов (будет возвращать набор элементов)

Пример:

Создадим две области для рисования. На одной нарисуем круг с диаметром 100px, а на второй – квадрат со стороной 50px. После этого анимируем получившиеся фигуры – диаметр круга уменьшим до 50px, а квадрат по оси “x” переместим на 160px влево (для просмотра наведите курсор мыши на область примера и нажмите на появившуюся кнопку Return)

[codepen_embed height=”290″ theme_id=”0″ slug_hash=”MbqXaz” default_tab=”result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/MbqXaz/’>MbqXaz</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Snap(query)

• query – селектор запросов CSS