Ingernirated: ты про <image>? SVG - это полноценный стандарт векторной графики, очевидно, в нем должны присутствовать максимальное количество возможностей.
Ingernirated: Ладно =)
Canvas - это холст (кстати, так и переводится это слово) для рисования. Лист бумаги. Единственный способ переместить нарисованный объект - стереть и нарисовать его заново или перерисовать весь холст.
SVG - это разновидность XML (как и HTML) - язык разметки. Как и HTML содержит в себе иерархические ноды, составляющие svg-документ. Так же к этим нодам можно получить доступ из джаваскрипт, а значит как-то их модифицировать, добавлять, удалять.
wofh-tools.ru/technology/#sci1
html элементы поверх канвы, линии на канве.
При резайзе окна пересчитываются координаты блоков, и перерисовываются линии.
У вас линии поверх элементов, значит канву располагайте сверху. Будет небольшой геморройчик с кликами по блокам. Но решаемо. Если в лоб - pointer-event для канвы. Но у вас там похоже и ховеры по линиям надо обрабатывать. Так что придется мышку самому обрабатывать. Сложнее, но реально.
Это неправильная мысль. При использовании препроцессора вам нужно следить за чистотой исходного кода, а не скомпилированного css. Конечно, нужно понимать какие конструкции препроцессора раздувают конечный код и использовать их с умом, но чистота выходного кода не должна быть самоцелью.
Егор Живагин: в принципе полезно заниматься такой херней в свободное время. лучше начинаешь понимать как что работает, учишься нестандартно мыслить, плюс какие-то "изобретенные" техники можно будет в дальнейшем использовать в реальных проектах.
Я об этом говорил https://developer.mozilla.org/ru/docs/Web/SVG/Элем...