Question

我对标记的问题似乎无法解决。 marker-end无法呈现：

这是负责定义标记本身的代码：

  this.svg.insert('defs', ':first-child')
    .append('marker')
      .attr('id', 'arrow')
      .attr('markerUnits', 'strokeWidth')
      .attr('markerWidth', 12)
      .attr('markerHeight', 12)
      .attr('viewBox', '0 0 12 12')
      .attr('orient', 'auto')
    .append('path')
      .attr('d', 'M0, 0 V12 L12,12 Z');

然后在这里我渲染一条线并引用标记（稍后设置该线的x / y坐标）。

  this.line = container.append('line')
    .classed('arc', true)
    .attr('marker-end', 'url(#arrow)');

最后，LESS与标记和弧相关：

#arrow {
  stroke-fill: @light-gray;
  fill: @light-gray;
  stroke-width: 2px;
}

.arc {
  stroke: @light-gray;
  stroke-width: 4px;

  &:hover {
    stroke: @orange;
  }
}

我感谢任何帮助！

感谢。

Answer 1

使用'url(#arrow)'，而不是'url(marker#arrow)'。

url()内的值是一个URL，而不是一个CSS选择器！在这种情况下，它是一个本地URL片段，恰好看起来像等效的选择器。但是，如果您要在#之前放置任何内容，那么它将是一个完整的网址，例如url(http://example.com/myGraphic.svg#arrow)。

SVG标记不起作用

1 个答案: