Category: svg

22
Июл
2021

Как смягчить действие фильтра SVG? Получить более сглаженные границы?

Есть работа фильтров SVG и последующая анимация через JS. Настраиваю feTurbulence, передаю на вход feDisplacementMap, но получаю довольно "жесткий" результат – границы эффекта угловатые, не сглаженные.

const SCALE_MAX = 1;
co…

20
Июл
2021

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

Делаю примитивную анимацию волны. Но столкнулся с проблемой. Первая кривая Безье не согласуется с последующими, из-за этого пришлось спрятать этот участок за холстом.
Как можно упростить анимацию, ведь сейчас каждый раз создается новый пут…

19
Июл
2021

Как разрешаются конфликты свойства fill в SVG? Как работает наследование?

Я составил SVG и опробовал некие манипуляции свойства fill через JS.
Есть три круга. Первый имеет собственный атрибут fill, второй имеет значение none, а третий – наследует свойство от <svg>(?).
В JS пробую манипуляции.

Сначала прис…

19
Июл
2021

Как ввести и использовать переменные в SVG и одновременно в JavaScript?

Попробовал сделать небольшую игру в SVG под контролем JS. Однако столкнулся с проблемой: как ввести и повторно использовать в коде SVG переменные? Здесь для определения ширины и высоты <svg>, начальной позиции "шаровой молнии&qu…

18
Июл
2021

Текст в canvas масштабируется рывками, как можно сделать эффект более плавным?

Есть canvas, на котором отрисован текст. Холст перерисовывается согласно requestAnimationFrame(), при этом в каждом кадре увеличивается масштаб. Проблема: текст отрисовывается каждый раз как будто в разным местах, со смещением, получается,…

17
Июл
2021

svg многоугольник с двойной обводкой

По исходным данным я должен построить следующую диаграмму:

Основная проблема сейчас – Многоугольник с двойными границами. Я пробовал тени и двойные полигоны, это не работает. Любая идея?
Я использовал следующий код для создания точек для …

15
Июл
2021

Как сделать выборку svg для mimetype?

Wordpress.
Не могу понять, как выводить svg из папки, которые будут равны mimetype документов.
Мне не нужен плагин, хотел бы чистый php увидеть.
Причем суть в том, что каждый файл подписан под определенный mimetype и соответственно выбор…

09
Июл
2021

Почему использование SVG в ячейке <table> приводит к 100% ширине таблицы?

Я создаю таблицу, которая должна отображать данные приемлимым образом. И не занимать ширину 100%, если она не нужна.
Проблема в том, что в одном столбце я использую линейную диаграмму, и когда я строю эту диаграмму с помощью div, она работ…

25
Июн
2021

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

Всем добрый день, на этапе верстки столкнулся с одной проблемой, на которую не нашел не одного ответа. Очень много просерфил, но так и не понял. Из этого стоит понимать что у меня очень плохая связь с clip-path и svg (предполагаю что нужно…

22
Июн
2021

Верстка: круг с пустотой внутри и элементами по кругу

Нужна верстка круга с пустотой внутри и элементами вокруг данного круга. С ними в будущем нужно будет взаимодействовать. Ломаю голову уже около 40 минут, clip-path не помогает. При наведении каждый элемент должен подсвечиваться красным. Ка…

20
Июн
2021

svg – угол не острый, как ожидалось

Когда я пытаюсь нарисовать фигуру с помощью svg, углы выглядят не острыми, как ожидалось!
Правый угол выглядит потрясающе, но два других не выглядят острыми!
Я использую d3.js, чтобы нарисовать его!

var width = 600
var height = 600

15
Июн
2021

Подсвечивать места на картинке согласно координатам map – area

Есть картинка, к ней прописаны через map>area координаты мест для кликов.
Вопрос: можно ли эти места как-то подсвечивать при наведении на них мышкой? Форма подсветки может быть простой (в виде квадрата) или более сложной (что-то вроде t…

11
Июн
2021

Вырезать часть изображения CSS

Я пытаюсь создать эффект анимации glitch изображения.
Я использую слои с режимами смешивания и обрезки контуров.
А как я могу вырезать часть основного изображения?
Так как я хочу добиться эффекта смещения кусочка картинки, то
основным фоно…

17
Май
2021

Как сделать плавное движение слова?

как сделать что бы при нажатии на слово,оно плавно перемещалось над полоской. И так все остальные слова. Потом я нажимаю на "проверить" и если не правильно,то выдается ошибка,если правильно то выдается сообщение "верно"…

17
Май
2021

Как сделать плавное движение слова?

как сделать что бы при нажатии на слово,оно плавно перемещалось над полоской. И так все остальные слова. Потом я нажимаю на "проверить" и если не правильно,то выдается ошибка,если правильно то выдается сообщение "верно"…

08
Май
2021

Прорисовка отдельных путей между точками на карте с привязкой к прокрутке страницы в зависимости от просматриваемого контента

У меня есть карта, на которой точками отмечены координаты. Координаты — это города, между которыми проложен путь (SVG path):

Также у меня есть HTML страница с текстом. Вот полный ее код, включая SVG элемент, который содержит пять отдельны…

30
Апр
2021

Изменение цвета одной части изображения с помощью выборочной палитры

Итак, я пытаюсь выяснить, как выбрать одну часть изображения JPG / SVG (я использую SVG) и поместить выборочную палитру, чтобы с её помощью изменить каждую часть изображения другим цветом.
Я искал, но не нашел подходящего решения.
У меня …

27
Апр
2021

Верстка спидометра (SVG)

На Figma поступил вот такой дизайн спидометра.
Чем выше скорость автомобиля, тем больше по кругу должна заполняться желтая полоска.
Подскажите пожалуйста, как это можно сверстать.
Интересует именно то, как заполнять серую полоску желтым цв…

27
Апр
2021

Верстка спидометра (SVG)

На Figma поступил вот такой дизайн спидометра.
Чем выше скорость автомобиля, тем больше по кругу должна заполняться желтая полоска.
Подскажите пожалуйста, как это можно сверстать.
Интересует именно то, как заполнять серую полоску желтым цв…

27
Апр
2021

Верстка спидометра (SVG)

На Figma поступил вот такой дизайн спидометра.
Чем выше скорость автомобиля, тем больше по кругу должна заполняться желтая полоска.
Подскажите пожалуйста, как это можно сверстать.
Интересует именно то, как заполнять серую полоску желтым цв…