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

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

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

Дополнительно:

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

  • Román Mirilaczvili, вопрос в том как рассчитать, нарисовать свг от одного элемента к другому
  • godsplane, ну обычная математика, высота центральной фигуры, высота боковой фигуры, количество фигур сбоку, ищем центр дял перемычки и рисуем
  • Как один из вариантов

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

  • godsplane, могу в Corel Draw такое сделать и прислать тебе SVG чтобы ты увидел все "кишки" этого. Надо?
  • Нужно уметь рисовать SVG кодом. Начать можно отсюда css.yoksel.ru/svg-path

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

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

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

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

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

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

  • Либо ты сильно переусложнишь задачу. Либо задача не на 5 минут. Все зависит от поведения блоков и состояний где блок находится и поведение коннектора.
  • Вопрос был не о адаптивности, а о том - как?
    godsplane, https://github.com/svgdotjs/svg.js посмотрите.
  • ProjectSoft, да я видел эту либу. но это просто инстурмент для реализации. у меня вопрос имеено в том какую "формулу" или что нужно изучить чтобы научится делать такие вещи. Как высчитывать и тд.
  • godsplane, а вот тут уже включаем математику, дизайн, и рассчитываем углы, где должны быть изгибы. У вас всего лишь один patch или у вас их будет четыре. Может вы каждый patch засунете в отдельный слой...
    Тут решать только вам. Ещё раз - математика. Кода вам могут и не дать, ибо тогда это не помощь. Тут нужно самому сесть и начать рассчитывать.
  • ProjectSoft, я понимаю что математика)Но я же не буду учить всю математику только ради этого. + тут скорее всего больше алгебра или геометрия.
  • godsplane, всё правильно. Для моего возраста это 9-10 класс.
    Так что вспоминайте.

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

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

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

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

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

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

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


    • + Заказать

     

    Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

     

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

      Для создания связей между блоками на SVG (Scalable Vector Graphics) можно использовать элемент или . Вот примеры обоих способов:

      1. Использование :

      В данном примере создается линия, начальная точка которой имеет координаты (50, 50), а конечная точка - (150, 150). Цвет линии задается через атрибут stroke, толщина - через атрибут stroke-width.

      2. Использование :

      Здесь используется команда "M" для установки начальной точки, а затем команда "L" для создания линии до конечной точки. Атрибут fill="none" указывает, что внутренняя часть фигуры не заполняется.

      Также можно создавать кривые линии, используя другие команды в атрибуте "d" элемента . Например, команда "Q" для квадратичной кривой или "C" для кубической кривой.

      Это основные способы создания связей между блоками на SVG. При необходимости можно также использовать другие атрибуты для стилизации линий, такие как stroke-dasharray для создания пунктирных линий или stroke-linecap для выбора формы концов линии.

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

      Для создания связей между блоками на SVG (Scalable Vector Graphics) можно использовать элемент или . Вот несколько способов, как это можно сделать:

      1. Использование элемента :
      html


      В этом примере создается прямая линия между точками (50,50) и (150,150) с черным цветом и шириной линии 2.

      2. Использование элемента :
      html


      Этот пример создает тот же эффект, что и предыдущий, но используя элемент с командами "M" (move to) и "L" (line to).

      3. Использование кривых Безье:
      html


      Этот пример создает кривую линию с помощью кривых Безье, где "C" указывает на точки управления кривой.

      4. Использование элемента :
      html


      Этот пример создает полилинию, соединяющую несколько точек.

      Выбор способа создания связей между блоками на SVG зависит от ваших потребностей и предпочтений. Важно помнить, что SVG позволяет создавать разнообразные формы и линии, поэтому можно экспериментировать с различными методами и стилями.

    Оставить комментарий