Category: svg

23
Май
2020

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

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

21
Май
2020

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

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

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

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

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 а вот в центре этого шейпа есть точка и при движении мышкой эта точка р…

10
Май
2020

Как вставить svg код на сайт с помощью js

Я пытаюсь вставить svg на страницу как код. Структура примерно такая

<svg fill=”…” xmlns=”…” viewBox=”…” width=”…” height=”…”>
<path d=”…”/>
</svg>

Я создаю тег svg и пытаюсь создать дочерний элемент path,…

05
Май
2020

Масштабирование элементов при изменении размеров браузера

Хочу при изменении размеров окна браузера добиться того, чтобы все элементы страницы сохраняли целостность (позиции) и изменялись только в размере при увеличении/уменьшении размеров окна браузера соответственно. На моей HTML странице распо…

02
Май
2020

Как создать svg-дугу между блоками?

У меня есть несколько блоков, некоторые из них связаны друг с другом (как потребитель и расчеты). Необходимо по клику на один из связанных блоков нарисовать дугу, соединяющуюся с другим блоком таким образом, чтобы учесть:
1. Дуга не должн…

30
Апр
2020

Диаграмма donut SVG. Как сделать анимацию закрашивания?

Долгое время вожусь с анимацией закрашивания круга в зависимости от процента. Необходимо реализовать такое:

На данный момент я смог реализовать так:

То есть все как надо, анимация закрашивания работает, но радиус синего круга очень мал…

30
Апр
2020

Диаграмма donut SVG. Как сделать анимацию закрашивания?

Долгое время вожусь с анимацией закрашивания круга в зависимости от процента. Необходимо реализовать такое:

На данный момент я смог реализовать так:

То есть все как надо, анимация закрашивания работает, но радиус синего круга очень мал…

28
Апр
2020

При нажатии на клавишу H функция работает не полностью

Я сделал клавиши фортепиано в SVG, и к каждому <rect> подвязал событие oncklick(), и при нажатии на определённую клавишу на клавиатруе меняется заполнение fill на orange вместо белого или чёрного цвета. Вся клавиатура работает но име…

25
Апр
2020

Круговой индикатор прогресса с плавным заполнением по кругу цветным градиентом SVG

Мне нужно сделать круговой индикатор прогресса с цветным градиентом вдоль линии.
А также необходимо, чтобы концы линии круга были округлены.
На изображении ниже, показано то, чего я пытаюсь достичь:

Этот код близок к цели, но не …

23
Апр
2020

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

Интересует реализация скролл анимации, как на главном экране (первый блок) данного сайта – https://www.glia.com/
А если быть точнее: изменение контента при каждом пикселе прокрутки
(Я не ищу готового решения, мне нужна хотя бы идея)

10
Апр
2020

Как конвертировать screen координаты в пространство документа в масштабированном SVG?

Я использую плагин svg jquery Keith Wood, а не canvas HTML5.

Я определяю свое изображение svg таким образом, чтобы масштабировать мое изображение треугольника svg, чтобы оно соответствовало его контейнеру div:

<svg xmlns=”http…

05
Апр
2020

Как сделать что бы SVG анимация продолжалась с того же места где и закончилась

Есть анимация вращения палки покругу.
Она запускается по наведению мыши и прекращает вращаться по убиранию мыши с изображения.
Мне надо сделать так, что бы при повторном наведении анимация продолжалась с того же места где и закончилась при…

04
Апр
2020

Анимация вращения логотипа с сохранением ориентации букв

Как сделать анимацию вращения этой SVG фигуры?

Необходимо что бы фигура вращалась при наведении мыши.
Ориентация букв (верхом вверх) сохранялась во время вращения.

Задача делать не просто что бы работала, а хорошим, красивым способо…

02
Апр
2020

Как я могу заставить идти стрелки в часах?

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

02
Апр
2020

Не убирается класс у svg элемента

Смотрите, я хочу чтобы при изменении ширины экрана у меню убирался класс actived, точнее у svg элемента. Но он не срабатывает. Всё убирается кроме actived класс. Подскажите ошибку.

$(document).ready(function() {
function checkWidth…

01
Апр
2020

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

Я работаю с темой Elementor на WordPress и хочу анимировать svg-стрелку при наведении курсора, но у меня есть проблемы, чтобы сделать это. При наведении курсора на стрелку она должна становиться длиннее (см. Рисунки).

Стрелка в исходно…

01
Апр
2020

Как рассчитать координаты x и y для конца пути в круге SVG

У меня есть progress bar, который обновляется путем изменения свойства stroke-dashoffset path. Однако мне нужно вычислять координаты x и y конечной точки (округленной стороны) каждый раз, когда она обновляется.

Я собираюсь добавить ме…