角度SVG路径不可见

我正在做一个项目,我有一个页面列出了工作岗位,我需要用线条/箭头直观地显示进度(如何从一个工作到另一个工作),以便用户可以跟随。我创建了一个包含所有数据的页面,现在我尝试使用SVG路径在数据顶部创建线条并绘制路径。

我在另一个答案中找到了一些代码,我将其转换为纯JS,并删除了jQuery引用,以便能够在我的项目中使用它。

http://jsfiddle.net/x4nmqkLj/

http://jsfiddle.net/szrdb263/

我面临的问题是,SVG和路径似乎是创建的,但我无法看到DOM上的行/路径。但是,如果我查看web工具中的元素,我可以看到SVG元素和path元素,它们似乎位于从起始和结束位置绘制路径的正确位置。

我的渲染路径如下所示:

<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>

路径应该从第一个框中绘制一条线 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不是很熟悉,但是在DOM中看到SVG元素和Path元素让我觉得它非常接近。我无法想象箭头在DOM之外的任何地方,但我可能错了。

更新:

我将路径代码粘贴在几个SVG的“验证器”站点中,以查看它是否会绘制路径,并且我没有得到任何视觉指示。这表明它用于创建路径的坐标有问题。然而,在工作示例中使用了相同的代码,所以我想知道这是否是一个角度上的怪癖,毕竟是操纵DOM的排序。

我相信我已经解决了这个问题。我必须改变在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/