Category: svg

12
Янв
2021

Как быстро развернуть SVG?

Я использую SVG в гамбургер-меню, поэтому, когда пользователь щелкает это меню, SVG расширяется и заполняет весь экран. Я использую для этого scale(), поэтому в основном SVG имеет масштаб 1, а когда пользователь нажимает на меню, SVG получ…

07
Янв
2021

Скрипт заливки цветом контура svg

Есть SVG файл. Мне нужно заливать каким-то цветом контуры из этого SVG при клике мышкой на контуре. Я подключил библиотеку JQuery 1.7.1., нашел скрипт, который заливает цветом path из SVG. Но работает это только когда SVG находится в теле …

02
Янв
2021

Анимация заставки WINTER BASH

Заканчивается сезон WINTER BASH 2020
Хотелось бы, как-то отметить это событие.

На изображении цифрами отмечены, желаемые объекты для анимации
Сценарий анимации:

Генератор шляп.
Должен неравномерно перемещаться вверх-вниз
Знак вопроса до…

02
Янв
2021

Неполная отрисовка в процедурной анимации SVG

Пример двигает окружность SVG влево-вправо. При движении, окружность не всегда отрисовывается полностью. Проверка делалась в FireFox/Ubuntu. Дефект виден не всегда, но проявляется часто. В Chrome/Ubuntu дефект не заметен.
Я понимаю что кон…

29
Дек
2020

Изменение цвета svg картинки, в зависимости от цвета фона

У меня такая проблема. На главной странице сайта, находится заглушка слайдер. Нужно сделать так, что бы цвет .logo и кнопки .menu менялся на конкретных слайдах, на чёрный цвет.
codepen: https://codepen.io/realHikkan/pen/LYRemqO

var swi…

27
Дек
2020

Отрисовка прогрессбара на мобильных устройствах (stroke-dashoffset)

Есть прогрессбар, работает корректно на декстопах (через JS высчитываю stroke-dashoffset и добавляю через style).
Но, на мобильных, вместо обычного числового значения, в атрибут style добавляется значение + ‘px’. Как-то можно обойти эту пр…

16
Дек
2020

WP ошибка ‘Illegal string offset ‘ для SVG изображений задаваемых через виджеты

Столкнулся с проблемой вывода предупреждения перед отображением в теге img
Notice: Trying to access array offset on value of type bool in /var/www/html/wp-includes/media.php on line 1179Notice: Trying to access array offset on value of typ…

13
Дек
2020

Реализация анимации After Effects в коде

Я разрабатываю веб-приложение, на главной странице которого, есть необычная анимация, но я хотел бы подойти к нему с учетом ограничений производительности и отзывчивости.
В качестве входных данных для этой анимации я использую довольно сло…

08
Дек
2020

Обрезка фона, чтобы увидеть себя в контексте наложения

[Примечание. Ищете кроссбраузерное решение, которое не мигает на мгновение background’ом между каждой волной слизи (goo), как видно из ответа @ccprog В идеале решение не должно включать ожидание окончания первой волны, чтобы начать отображ…

03
Дек
2020

Как снизить нагрузку на ЦП при использовании анимации на сайте?

помогите пожалуйста с такой проблемой.
На сайте есть анимация, она сделана в AE и преобразована плагином bodymovin в json файл (+ папка с png).
Подключил на сайт по туториалу, в JS вообще не силен, открываю и вижу нагрузку на ЦП 50-70%.
Фа…

20
Ноя
2020

Анимировать выделение шрифта на кривой SVG

У меня есть текст, который движется по кругу SVG, и который масштабируется в зависимости от размера окна – Я хочу анимировать текст так, чтобы он вращался вокруг центра, как шатер. Для этого мой код в настоящее время выглядит так:

fun…

20
Ноя
2020

Как получить svg из object

Всем доброго дня! Подскажите пожалуйста, не могу понять. Пытаюсь инициализировать svg из object, но выдает пустой document, при этом картинка на странице есть.
Вот я достучался до object. Внутри его документа есть svg

Как только стучусь …

19
Ноя
2020

Как убрать результаты работы анимации при повторном запуске анимации?

На примере ниже видно, что при первом запуске анимации все идет, как и ожидалось: анимация рисования линий с помощью изменения атрибута stroke-dasharray
В формуле анимации этого атрибута есть параметр fill="freeze", который замор…

19
Ноя
2020

Как добиться корректной работы кнопки пуск эквалайзера?

Я разработал приложение имитирующее работу эквалайзера в части показа изменения аудио частот

Проблемы с анимацией возникают при повторном нажатии на кнопку "Start"
Результаты анимации сбрасывается и анимация начинается с самого…

17
Ноя
2020

Как заанимировать эквалайзер

Есть задача заанимировать такой эквалайзер https://prnt.sc/vki1ks.

Он должен просто попрыгать в течении некоторого времени и превратиться в линию (без музыки). Пробовал сделать в canvas с помощью библиотеки paper.js, но линии вышли нечётк…

13
Ноя
2020

Парсинг атрибута transform SVG с помощью javascript

Предположим, у нас есть строка преобразования SVG:
transform = "translate(6,5),scale(3,3)";
Есть ли гладкая функция регулярного выражения, которую мы могли бы использовать, чтобы преобразовать ее во что-то полезное?
Свободный пер…

13
Ноя
2020

Как в Leaflet отрисовать маркеры через svg

Столкнулся с проблемой отрисовки маркеров в react leaflet. leaflet заворачивает svg иконку в тег img, от чего мне нужно избавиться. В качестве иконки маркера может быть изогнутая стрелка. Нужно, чтобы тултип показывался при наведении на ст…

10
Ноя
2020

Ориентация поворота круглого изображения в SVG progress

Я пытаюсь создать круглый индикатор выполнения (как показано на изображении ниже). Прогрессия основана на процентах и будет двигаться по кругу до этого процента.
У меня прогрессия (линия) движется, но иконка, который движется вместе с ней,…

10
Ноя
2020

Как анимировать маршрут (path) на SVG карте?

Есть SVG карта созданная на Raphael. Как можно анимировать маршрут между двумя кликами на карте, как например здесь
Пример на картинке –

На яндекс и гугл картах понятно, там свой API, но как сделать нечто подобное на SVG. Есть ли какие-то…