6.5 KiB
test
SVGconnector_5a
Вариант "SVG/connector 5a" (условно)
Связанная ссылка SVG/connector
Файл ttest5a.svg показывает, как легко можно вводить данные по VAD - процессу. См. конец файла:
<use id="box1" href="#VAD1" x="10" y="10" />
addInnerLabel('box1', 'Закупка заготовок');
createDirectedConnector('box1', 'box2');
addLabel('box1', 'Блок 1');
Таким образом мы указали id (subject), надпись к нему, далее отношение vad:hasNext (как функция createDirectedConnector) и подпись внизу элемента (это будет "роль \ исполнитель").
файл ttest5a.svg на Pages
Можно далее дополнять функциональностью: выделить шаблоны (синтаксис) в отдельный блок (см. ниже Архив 1), перенос слов, изгибающиеся линии, линии огибания фигур и т.п. В итоге получим формат близкий к drawio (jgraph) или yEd (.graphml). Однако на начальном этапе достаточно упрощенных возможностей, но в рамках SVG, для которого viewer -ом является браузер (не нужен специализированный viewer).
В итоге: в SVG/connector 5a задали: имя узлов (id например через имя с заменой пробелов подчеркиванием), label узлов (имя с пробелами), ребро узлов (как функция узел А - узел В) и дополнительно подпись к узлу.
Архив 1. Вызов элементов из библиотеки, реализуемой в отдельном (первом) svg
sec_file_http.svg клонирует элементы из first_file_http.svg
Два файла first_file.svg и sec_file.svg при скачивании не сработают, т.к. будет ошибка безопасности (CORS): URLs are treated as unique security origins.
Основной файл остается ttest2.svg
Попытка определеить шаблоны в блоке def, см. ttest3no.svg - не успешны, т.к. не отрисовываются корректно стрелки. Потому что:
- "В вашем коде есть ошибка, из-за которой стрелка не выходит из правой стороны прямоугольника. Проблема заключается в том, что вы используете box1.width.baseVal.value и box1.height.baseVal.value для получения ширины и высоты прямоугольника, но эти значения не доступны для элемента , так как он не имеет свойств width и height. Вместо этого вам нужно использовать значения, определенные в ".
- Объяснение изменений
- Ширина и высота: Я добавил переменные box1Width, box1Height, box2Width, и box2Height, чтобы явно указать размеры прямоугольников, так как элементы не имеют этих свойств.
- Использование переменных: Теперь при вычислении координат для соединительных линий используются эти переменные, что позволяет правильно определить правую сторону первого прямоугольника.
Теперь стрелка должна корректно выходить из правой стороны прямоугольника.
Результат см. ttest4no.svg. Однако определение высоты и ширины объекта (rect) в коде js не верно:
const box1Width = 50; // Ширина прямоугольника VAD1
Их нужно определять в def или в крайнем случае в