Snap(…)

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

 

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *