角SVG路径不可见

Question

我正在一个项目中，我有一个列出工作位置的页面，我需要使用线条/箭头直观地显示进度（如何从一项工作转到另一项工作），以便用户可以继续。我创建了一个包含所有数据的页面，现在我试图使用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>

以下是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并不是很熟悉，但是看到DOM中的SVG元素和Path元素使我觉得它非常接近。我无法想象箭头在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/

Answer 1

通过执行以下操作，我得到了您的示例：

• 在offsetTop中用offsetLeft和getBoundingClientRect().top替换了getBoundingClientRect().left和connectElements()
• 调整了svgContainer的样式以使其具有正的z索引，以便将svg绘制在其他元素上
• 在svgContainer中添加了pointer-events: none;，以便您仍然可以与其中的元素进行交互

这是更新的Fiddle。