Snap(…)

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

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

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

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

Пример:

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

See the Pen MbqGbO by Aleksei (@AmateR) on CodePen.dark



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

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

Пример:

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

See the Pen gLdzpO by Aleksei (@AmateR) on CodePen.dark


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

Пример:

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

See the Pen MbqXaz by Aleksei (@AmateR) on CodePen.0


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

 

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

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