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