Вопросы с меткой [snapsvg]
Snap.svg — это JavaScript-библиотека, которая позволяет легко создавать и управлять SVG графикой в современных браузерах. Преемник Rafael.
19
вопросов
0
голосов
0
ответов
27
показов
SnapSvg как повесить эвент перетаскивая мышкой, что бы можно было кликнуть и крутить вокруг оси?
Всем привет, задача такая, мне нужно отрисовать круг разделенный на равные части, на них отрисовать еще кружочки с текстом/картинками - это я сделал, НО надо еще заставить крутиться когда нажал на ...
4
голоса
2
ответа
50
показов
Создание повторяющегося шаблона из 9-ти кругов. Один круг в центре, и по четыре круга в каждой вершине и по середине сторон
У меня есть задача, когда я пытаюсь создать 9 кругов в каждом прямоугольнике (4 в каждом углу, 4 по бокам и 1 в центре), одновременно после создания прямоугольника. В моем решении создается 4 круга ...
0
голосов
1
ответ
74
показа
Анимация конфетти(canvas) с snap.js
Учу с нуля. Но ответа на данный вопрос не нашел
Нашел единственно подходящую анимацию конфетти. Вставил ее в конец HTML, и теперь есть анимация при открытии страницы поверх моего snap.js:
<script ...
1
голос
2
ответа
108
показов
SVG анимация пчелы с SVG.js
Как вы можете видеть в этом codepen, есть изображение SVG простой пчелы . В идеале я хотел бы добиться анимации, в которой пчела жужжит вокруг этого холста, но пока я просто пытаюсь переместить ее ...
7
голосов
2
ответа
125
показов
Плавная трансформация path относительно определенной точки
Необходимо анимировать path из первого состояния во второе (как показано на изображении).
Анимацию реализовал на Snap.svg:
s = Snap(485, 788);
var path = s.path("M235.4 216.8c-27.1-8.1-47.8-53.5-...
1
голос
1
ответ
129
показов
Реализовать полоски и круги с цветными сегментами, как дано в 3D макете дизайнера?
Подскажите как реализовать?
На 1 скрине фотошоп показывает, что это картинка или делать текстом лучше?
На 2 скрине, как лучше сделать полоску с картинкой, полоску с кружком отдельно?
Через div ...
4
голоса
1
ответ
410
показов
Определение длины окружности для аттрибута stroke-dasharray
Круговой процентный прогресс бар
В данном ответе на вопрос, есть такой код:
<svg id="svg" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#FDB900"/>
<path fill="none" ...
1
голос
1
ответ
48
показов
Snap.svg виснет при рендере более 500 путей
Я рендерю кучу Путей (примерно 600), используя snap.svg Применяю для анимации requestAnimationFrame
Вот код
function animate() {
requestAnimationFrame(animate)
for(var i = 0 ; i<600; i++) {
...
2
голоса
0
ответов
58
показов
как сделать задержку svg animate with Snap.js
Как сделать, чтобы линии поочереди выполняли анимацию?
Еще интересует, как можно такую анимацию делать максимально просто. В правильном ли я направлении? Мне еще нужно отрисовать линию к кнопке
$...
26
голосов
4
ответа
959
показов
Как получить путь пересечения двух путей SVG программно?
Нужно пересечь два SVG-пути и получить путь, представляющий их пересечение.
Не важно, будет это работать в браузере или в Node.js.
Нужно именно пересечение, использование clip-path не подходит.
Если ...
2
голоса
0
ответов
93
показа
Создание фигуры в результате пересечения фигур snap.svg
Как получить фигуру из пересечение двух кругов?
var s = Snap('#q');
var circle1 = s.circle(50, 50, 50).attr({fill: '#000', stroke: 'red'});
var circle2 = s.circle(80, 80, 50).attr({fill: '#000',...
4
голоса
2
ответа
375
показов
Каким образом создаются SVG анимации или трансформации?
На многих сайтах я видел как svg path в виде треугольника по hover/click превращается в круг, и потом в книгу или ещё в какой то объект!
Сам вопрос: как это работает и что нужно анимировать?
Я ...
2
голоса
0
ответов
90
показов
SVG , пересечение элементов
Доброе время суток . Рисую svg , используя snap.js. Элементы создаются циклом и каждому новому элементу координаты задаются рандомно ( в пределе возможного ), проблема заключается : Как реализовать ...
0
голосов
0
ответов
241
показ
snapsvg (Cannot read property 'attr' of null)
Подскажите пожалуйста, в чем может быть ошибка? Картинка в блок грузится, но атрибут отказывается работать.
HTML
<div id="board"></div>
JS
var board, choice, choiceGroup;
board = Snap(...
4
голоса
4
ответа
289
показов
Snap svg неправильно вычисляет длину path
Вот пример.
Я пытаюсь сделать анимацию для 'path', используя атрибуты dasharray \ dashoffset.
Но Snap Svg неправильно вычисляет длину path.
Svg изображение, создано с помощью составного ...
1
голос
1
ответ
90
показов
Обновить состояние кнопки
Доброго времени знатоки. Снова нуждаюсь в вашей помощи. Есть анимация svg кнопки "гамбургер". Работает чудесно, нажав на нее открывается и закрывается. Но мне надо добавить, чтобы можно было ее ...
2
голоса
1
ответ
296
показов
Как реализовать передачу в контроллер атрибутов элемента, созданного динамически с помощью Snap.SVG
Вопрос в следующем: есть у меня поле размером 39х32 созданное с помощью Snap.SVG. В нем находится 1248 элементов. Каждый со своим номером, атрибутами col и row.
Задача стоит следующая: при нажатии на ...
4
голоса
1
ответ
775
показов
Рисовать линию между двумя объектами которые движутся snap svg
Есть 2 круга. Они постоянно летают вверх и вниз. Через них должна проходить линия. Нужно чтобы линия постоянно перерисовывалась в зависимости от расстояние этих кругов. Т.е. при каждом движении.
С ...
1
голос
0
ответов
454
показа
Snap.svg работа с группой объектов, отдельно
Здравствуйте!
Вопрос такой, загружаю файл svg, как группу объектов, как мне работать отдельно с каждым из них?
<html>
<head>
<script type = "text/javascript" src = "JS/jquery.js"&...