Как рисуются такие связи между блоками на svg?

Question

[godsplan]

судя по исходному коду это все было рассчитано на js и отрисовано в свг.
Каким образом рисуются такие вещи?Какой алгоритм?
Что нужно знать чтобы уметь делать такое?
Может есть живые примеры реализаций?

Comments

[d'Ivan]

В смысле? Вопрос о том как создать замкнутую фигуру с заливкой фона?

[godsplan]

Román Mirilaczvili, вопрос в том как рассчитать, нарисовать свг от одного элемента к другому

[Дмитрий]

godsplane, ну обычная математика, высота центральной фигуры, высота боковой фигуры, количество фигур сбоку, ищем центр дял перемычки и рисуем

[FKV]

Как один из вариантов

[Антон Р.]

godsplane, могу в Corel Draw такое сделать и прислать тебе SVG чтобы ты увидел все "кишки" этого. Надо?

[Ankhena]

Нужно уметь рисовать SVG кодом. Начать можно отсюда css.yoksel.ru/svg-path

Это если вы уверены, в том, что в рисовании участвовал JS.

Хотя, если JS, то зачем тут SVG вместо обычных псевдо...

[godsplan]

Ankhena, так к псевдо нет доступы из жс

[godsplan]

Дмитрий, ну вот мне нужно это как то более подробно изучить а где я хз.

[Ankhena]

godsplane,

так к псевдо нет доступы из жс

Зато есть к кастомным для самого элемента или родителя.

Там и calc может хватить или тех же кастомных. Но мы не знаем ТЗ, откуда берутся блоки, их размеры, позиция и т.д.

[Froggyweb]

Либо ты сильно переусложнишь задачу. Либо задача не на 5 минут. Все зависит от поведения блоков и состояний где блок находится и поведение коннектора.

[ProjectSoft]

Вопрос был не о адаптивности, а о том - как?
godsplane, https://github.com/svgdotjs/svg.js посмотрите.

[godsplan]

ProjectSoft, да я видел эту либу. но это просто инстурмент для реализации. у меня вопрос имеено в том какую "формулу" или что нужно изучить чтобы научится делать такие вещи. Как высчитывать и тд.

[ProjectSoft]

godsplane, а вот тут уже включаем математику, дизайн, и рассчитываем углы, где должны быть изгибы. У вас всего лишь один patch или у вас их будет четыре. Может вы каждый patch засунете в отдельный слой...
Тут решать только вам. Ещё раз - математика. Кода вам могут и не дать, ибо тогда это не помощь. Тут нужно самому сесть и начать рассчитывать.

[godsplan]

ProjectSoft, я понимаю что математика)Но я же не буду учить всю математику только ради этого. + тут скорее всего больше алгебра или геометрия.

[ProjectSoft]

godsplane, всё правильно. Для моего возраста это 9-10 класс.
Так что вспоминайте.

PS:
Дам наводку.
Так же, на GitHub можно напречь поиск и там посмотреть по логике реализации создания рисунка на SVG в JS.

[Владимир Коротенко]

godsplane, Вы привели источник, так распотрошите его!

[Ankhena]

godsplane,

Но я же не буду учить всю математику только ради этого.

Это очень смешно.
Рисование по координатам у меня было в 6 классе.
Проценты и пропорции, не помню в каком, но тоже школа, причем не старшая.
Что там еще? Окружности, дуги, длина отрезка?
Ладно, с кривыми Безье сложнее, наверное, не школа или зависит от учителя.

Если что-то из этого потерялось из головы или прошло на уроках мимо (у меня, наверное, половина школьной программы потерялась :) ), то легко восстанавливается.

Ссылку на теорию рисования path я дала выше. С остальными фигурами еще проще.

Я бы начала так: нарисовала кривулину и вооружившись статьей разбиралась, что получилось в коде и почему именно так. (Собственно, это даже не "бы", а так и делала).
Потом в обратную строну: пишем в коде, представляем что должно быть, проверяем.