Я работаю над проектом, где у меня есть страница со списком рабочих мест, и мне нужно визуально показать прогрессию (как перейти с одной работы на другую) с помощью линий / стрелок, чтобы пользователь мог следовать за ними. Я создал страницу, которая содержит все данные для этого, и теперь я пытаюсь использовать пути SVG для создания линий поверх данных и рисования путей.
Я нашел код в другом ответе, который преобразовал в чистый JS и удалил ссылки jQuery, чтобы иметь возможность использовать его в своем проекте.
Вот рабочая скрипка с одним примером пути:
http://jsfiddle.net/x4nmqkLj/
Вот моя попытка:
http://jsfiddle.net/szrdb263/
Моя проблема, с которой я сталкиваюсь, заключается в том, что SVG и Path кажутся созданными, НО, я не могу увидеть линию / путь в DOM. Однако, если я просматриваю элементы в веб-инструментах, я вижу элемент SVG и элемент пути, и они, кажется, находятся в правильном месте, куда путь будет нарисован из начальной и конечной позиции.
Мой отображаемый путь выглядит следующим образом:
<path class="path" id="path1" d="M449.953125 512.34375 V568.03125 A55.6875 55.6875 0 0 0 505.640625 623.71875 H765.515625 A55.6875 55.6875 0 0 1 821.203125 679.40625 V1055.3203125"></path>
Вот элемент SVG:
Вот элемент пути:
Путь должен рисовать линию от первого поля 1A до нижнего ряда, второе поле 2D. Кажется, что путь находится там, где и ожидалось, от нижнего центра первого поля до верхнего центра нижнего поля, где будет нарисована стрелка.
CSS:
#svgContainer {
z-index: -10;
opacity: 0.5;
margin: 2.5em 2.5em;
position: absolute;
background-color: #999;
}
path {
fill: none !important;
stroke: #000 !important;
stroke-width: 0.7em !important;
}
Есть что-то конкретное, что я пропускаю, и это не появляется?
Я не очень знаком с SVG, но видение как элемента SVG, так и элемента Path в DOM заставляет меня думать, что он довольно близок. Я не могу представить, что стрелка находится за пределами DOM, но я могу ошибаться.
Обновление:
Я вставил свой код пути в несколько «валидаторных» сайтов для SVG, чтобы посмотреть, будет ли он нарисован, и я не получаю никаких визуальных указаний. Это предполагает, что что-то не так с координатами, которые он использует для создания пути. Тем не менее, тот же код используется в рабочем примере, поэтому я задаюсь вопросом, является ли это в конце концов угловатым извращением при манипулировании своего рода DOM.
Обновление 2:
Я считаю, что я решил проблему. Мне пришлось изменить способ получения конечных координат в JS.
До:
// calculate path's end (x,y) coords
var endX = endCoord.offsetLeft + 0.5 * endElem.offsetWidth - svgLeft;
var endY = endCoord.offsetTop - svgTop;
После того, как:
// calculate path's end (x,y) coords
var endX = endCoord.getBoundingClientRect().left + 0.5 * endElem.offsetWidth - svgLeft;
var endY = endCoord.getBoundingClientRect().top - svgTop;
Новая скрипка: http://jsfiddle.net/8dumowvt/