SVG 标记未出现在 Edge 和 Firefox（D3.js、Angular2）中答案

【问题标题】：SVG markers not appearing in Edge and Firefox (D3.js, Angular2)SVG 标记未出现在 Edge 和 Firefox（D3.js、Angular2）中
【发布时间】：2017-07-20 22:10:34
【问题描述】：

我正在使用 D3.js 开发一个应用程序，但遇到了一些标记未出现在 Edge/Firefox 中的问题。

页面中嵌入了以下 SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="100%" height="100%">
  <defs>
    <marker id="Arrow" viewBox="0 0 20 20" refX="0" refY="10" markerWidth="15" markerHeight="10" orient="auto">
      <path d="M 0 0 L 20 10 L 0 20" />
    </marker>
  </defs>
  <path stroke-dasharray="10, 10" d="M 500 500 L 75 75" MARKER-END="url(#Arrow)"/>
</svg>

如果我进入 HTML 文件，它会按预期工作。但是赢得 Angular2 项目的 IE 和 Firefox 都不会显示 Marker-end。 IE 在控制台中通过 Marker-end 属性引发错误，除非它是全大写的（XML5619：文档语法不正确。）。我已经在 CSS 中指定了标记结尾的路径上尝试了一个类 - 具有相同的错误和相同的结果。

Firefox 没有抛出 XML 错误，但也没有显示标记结束；它只出现在 Chrome 中。

【问题讨论】：

标签： angular d3.js svg

【解决方案1】：

问题解决了。 Angular2 使用

<base href="/">

在页面上，这会破坏路径查找 url(#Arrow) 的能力。

解决方法是在d3.js中添加marker属性，并预先添加location.href：

renderArrows() {
    var arrows = d3.selectAll('path.arrow');

    arrows.each(function (d) {
      var path = d3.select(this);
      path
      .attr('stroke-linecap', 'round')
      .attr('marker-end', function(d,i){ return "url(" + location.href + "#Arrow)" })
    })
  }

【讨论】：