Category: svg

13
Авг
2020

Как сохранить пробелы в SVG тексте

Необходимо в текстовый элемент вставлять новое значение. Значение может быть от 0.0 до 100.0. т.е. максимальное количество символов в строке может быть 5. Есть код, который добавляет нужное количество пробелов справа и слева, если длина те…

12
Авг
2020

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

Необходимо реализовать такую задумку. Есть некая рабочая область. В нее можно добавлять блоки, можно перемещать блоки. Должна быть возможность соединять блоки в цепочки. Все это должно делаться интерактивно. Например как на картинке:

Как …

12
Авг
2020

Игра по обводке (заполнению) букв

Всем привет, я пытаюсь создать такую игру. Но у меня проблема с заполнением SVG внутри canvas. Сначала я пытался сделать игру с помощью vanilla js (использую только vuejs), но у меня получилось слишком много багов (я покажу свой код ниже)….

10
Авг
2020

SVG Анимация сообщения об успехе

Когда я выполняю успешную вставку, я показываю пользователю сообщение об успешном выполнении, которое содержит иконку успеха svg.
Я хочу сначала показать зеленый кружок, а затем анимировать отметку ОК.
Как это сделать с помощью Java Script…

04
Авг
2020

Как управлять анимацией движения с помощью Javascript

Этот вопрос инициирован ответом в топике Как заставить circle двигаться по path с определенного места?
Как выяснилось Chrome обрабатывает с ошибками атрибуты анимации SVG keyPoints и keyTimes.
Поэтому невозможно изменить стартовую точку и …

28
Июл
2020

Вращение круга SVG с элементом группы

Я хотел бы вращать SVG-круг, не давая вращаться другим элементам

Когда я пытаюсь повернуть круг (белого цвета) с помощью rotateZ (15 градусов), то это выглядит, как на рисунке ниже:

Это мой прогресс до сих пор: jsfiddle
Я хотел бы дости…

26
Июл
2020

Замена SVG на DIV

Нашел код, который работает через , хотел его вшить в свой, но у меня стоят .
Соответственно код с SVG не работает.
Можно ли этот код как-то переписать под DIV?
<svg>
<g id="Maps">
<image xlink:href=&qu…

18
Июл
2020

Поворачивать руку фигуры в соответствии с перемещением курсора мыши

У меня есть изображение SVG доктора, которого я хочу немного оживить. Я хочу, чтобы рука указала на мышь. Однако я не могу заставить его правильно работать.
В настоящее время у меня есть следующий код:
Смотрите Codepen
Как видите, рука неп…

14
Июл
2020

Конвертировать PATH из SVG в POLYLINE

Я создаю алгоритм, и мне нужна ваша помощь. У меня есть этот векторный файл (SVG), и я хотел бы знать, есть ли способ экспортировать / преобразовать это изображение в полилинии SVG только без дуги, besier …?
Что-то вроде этого:

Допустим…

08
Июл
2020

Как лучше реализовать задуманный скролл?

Только начала осваивать анимацию с JS.
Подскажите, как лучше будет реализовать данный полукруг, чтобы в дальнейшим подключить анимацию с возможностью скролла и выбора(клика) определённого текста

08
Июл
2020

Как лучше реализовать задуманный скролл?

Только начала осваивать анимацию с JS.
Подскажите, как лучше будет реализовать данный полукруг, чтобы в дальнейшим подключить анимацию с возможностью скролла и выбора(клика) определённого текста

08
Июл
2020

Динамически растягивать слова на любую высоту экрана

Есть такая маленькая программа, которая динамически меняет слово внутри SVG.
Необходимо добиться такого эффекта, чтобы независимо от слова или группы слов они всегда растягивались по всей высоте (так как их поввернули на 90 градусов), изме…

05
Июл
2020

Как динамично изменять font-size, чтобы одно слово (повернутое на 90 градусов) занимало всю высоту экрана?

Нужно чтобы при изменении высоты экрана, повернутое слово всегда оставалось растянуто относительно его краев, за счет изменения шрифта. Как это можно сделать? Желательно без JS, но думаю тут без него не обойтись.

.bgString {
font-s…

04
Июл
2020

Как реализовать анимацию плавного морфинга границ изображения?

Есть картинка, при ховере ее границы должны начать хаотично плавать, изгибаться, пока не убран курсор.
Насколько понял, это должно быть связано с svg morphing, но примера не нашел. Только анимация чистой svg, без картинки.
Может у кого ес…

30
Июн
2020

Как масштабировать SVG-`path` для функции motionpath anime.js?

Я использую anime.js для анимации SVG-circle вдоль SVG-path с помощью функции motionPath. Все работает, кроме масштабирования path.
Когда я применяю стиль CSS или помещаю path в элемент div, видимый path изменяется, но функция все еще исп…

23
Май
2020

С помощью какого инструмента лучше всего создать радиальное (круговое) меню | CANVAS vs SVG

Интересует вопрос, с помощью какого инструмента можно создать подобное меню? На чистом канвасе или прибегнуть к SVG, само меню будет двух слойное, при клике на один из элементов будет вылезать второй слой круга, что-то на подобие под мен…

21
Май
2020

Как вывести массив svg картинок в create react app?

Проект делается на create react app, далее CRA

Проблема: есть массив с названиями картинок, который нужно перебрать и вставить как svg в разметку чтобы иметь доступ изменить цвет обводку и т.д.

До этого собирался галпом спрайт и картинки…

17
Май
2020

Как с помощью маски SVG сделать плавный переход от одного изображения к другому

Допустим, у меня есть многоцветный градиент, который заполняет экран

<svg id=”svg1″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”
xmlns:ev=”http://www.w3.org/2001/xml-events…

16
Май
2020

Background Image в Zdog

Здравствуйте пользователи stackoverflow. Наткнулся на проблему на js в zdog не могу указать изображение как фон грани в box, с установкой цвета фона проблем не возникает, только с Background image. Спасибо.

new Zdog.Box({
addTo: illo,…

13
Май
2020

Как правильно сделать адаптивную карту с svg слоями?

Есть вот такая карта. Нужно большинство элементов перенести как SVG слои + сделать кликабельными. Естественно, это всё должно тянуться при уменьшении экрана.

В общем, вопросы
1) Как сделать так, чтобы при смене вьюпорта картинки не разле…

12
Май
2020

Как выполнен этот курсор?

Я хочу повторить эффект с сайта https://www.peststopboys.co.uk/

Сами фигурки на фоне не интересны

Заинтересовал эффект в курсоре …понятно что там шейп с animation а вот в центре этого шейпа есть точка и при движении мышкой эта точка р…