Question

我正在使用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中。

Answer 1

问题解决了。 Angular2使用

<base href="/">

页面上的

，这会破坏路径找到网址的能力（#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)" })
    })
  }

更多信息： Using base tag on a page that contains SVG marker elements fails to render marker

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

1 个答案: