在Chrome SVG图表上，箭头标记-mid被查看了3次，而不是1次 [英] On Chrome SVG chart arrowhead marker-mid is viewed 3 times instead 1

问题描述

我已经在D3.js中创建了简单的力图.

I have created simple force chart in D3.js.

有节点，并且在节点之间有中间带有标记的链接(使用marked-mid).

There are nodes and between nodes there are links with the markers in the middle (using marked-mid).

问题是由于某种原因，此标记在Chrome上呈现3次而不是1次.在IE和FF上，它工作良好.

The problem is that for some reason on Chrome this marker is rendered 3 times instead 1. On IE and FF it works good.

以下，我仅在SVG中发布代码，因为这是我认为路径问题未与D3.js连接.

Below I'm posting code only in SVG as this is I think path issue not connected to D3.js.

    <svg class="baseSVG" style="width: 100%; height: 90%;">
  <g class="chart_wrapper">
    <g class="links">
      <g class="link_wrapper">
        <path class="link hate" marker-mid="url(#arrow)" d="M 342.9891277180959 320.7671874251745 A 190.7182256881292 190.7182256881292 0 0 1 225.76595293193114 281.82896265692517 A 190.7182256881292 190.7182256881292 0 0 1 156.98831902253903 179.22732948826612"></path>
      </g>
    </g>
    <g id="person0" class="node person Adam" transform="translate(156.98831902253903,179.22732948826612)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Adam</text>
      </g>
    </g>
    <g id="person1" class="node person Eve" transform="translate(342.9891277180959,320.7671874251745)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Eve</text>
      </g>
    </g>
    <g id="person2" class="node person Kazik" transform="translate(179.355374155828,342.83615430106596)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Kazik</text>
      </g>
    </g>
    <g id="person3" class="node person Janina" transform="translate(320.66071665952427,157.09136472857676)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Janina</text>
      </g>
    </g>
  </g>
  <defs>
    <marker id="double-arrow" refY="0" refX="0" viewBox="0 -20 40 40" markerWidth="40" markerHeight="40" markerUnits="userSpaceOnUse" class="double-arrow" orient="auto">
      <path d="M0,-5L10,0L0,5" transform="translate(20)"></path>
      <path d="M0,0L10,-5L10,5" transform="translate(0)"></path>
    </marker>
  </defs>
  <defs></defs>
  <defs>
    <marker id="arrow" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto" markerUnits="userSpaceOnUse" class="arrow">
      <path d="M0,-5L10,0L0,5"></path>
    </marker>
  </defs>
  <defs></defs>
</svg>

JSFiddle中的示例

推荐答案

如果有人正在寻找答案.

If someone is looking for an answer.

@theOneGuy和@echonax是正确的.要解决的问题是，我不能使用marker-mid，而要使用marker-start.

@theOneGuy and @echonax were right. To fix is that I can't use marker-mid and instead use marker-start.

因此，我没有一条显示带有标记中线的路径定义，而是有两条路径在图表上相遇并创建了一条线.第二条道路有起点.

So instead of one path definition that show line with marker-mid I have two paths that meet on the chart creating one line. Second path have marker-start.

开始标记是因为在第二条路径上，因为它需要在z-index方面位于顶部.

Marker start because on second path because it need to be on top in terms of z-index.

 <svg class="baseSVG" style="width: 100%; height: 90%;">
  <g class="chart_wrapper">
    <g class="links">
      <g class="link_wrapper">
        <path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 L 242.21936721772218 252.41406759336707"></path>
        <path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 242.21936721772218 252.41406759336707 L 137.63410024475814 280.8314657786965"></path>
      </g>
      <g class="link_wrapper">
        <path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 A 303.64066468574316 303.64066468574316 0 0 1 247.4635305967095 271.71429428774377"></path>
        <path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 247.4635305967095 271.71429428774377 A 303.64066468574316 303.64066468574316 0 0 1 137.63410024475814 280.8314657786965"></path>
      </g>
      <g class="link_wrapper">
        <path class="link hate half1" half1="true" d="M 137.63410024475814 280.8314657786965 A 166.82033234287158 166.82033234287158 0 0 1 231.73104045974543 213.81361420460564"></path>
        <path class="link hate half2" marker-start="url(#double-arrow)" half1="false" d="M 231.73104045974543 213.81361420460564 A 166.82033234287158 166.82033234287158 0 0 1 346.8046341906862 223.99666940803763"></path>
      </g>
    </g>
    <g id="person0" class="node person Adam" transform="translate(346.8046341906862,223.99666940803763)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Adam</text>
      </g>
    </g>
    <g id="person1" class="node person Eve" transform="translate(137.63410024475814,280.8314657786965)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Eve</text>
      </g>
    </g>
    <g id="person2" class="node person Kazik" transform="translate(289.2970047078608,367.65475135214126)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Kazik</text>
      </g>
    </g>
    <g id="person3" class="node person Janina" transform="translate(226.0636547128077,127.42597160431035)">
      <g class="node_inner" transform="translate(-50,-30)">
        <rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
        <text text-anchor="middle" transform="translate(50,70)">Janina</text>
      </g>
    </g>
  </g>
  <defs>
    <marker id="double-arrow" refY="0" refX="0" viewBox="0 -20 40 40" markerWidth="40" markerHeight="40" markerUnits="userSpaceOnUse" class="double-arrow" orient="auto">
      <path d="M0,-5L10,0L0,5" transform="translate(20)"></path>
      <path d="M0,0L10,-5L10,5" transform="translate(0)"></path>
    </marker>
  </defs>
  <defs>
    <marker id="arrow" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto" markerUnits="userSpaceOnUse" class="arrow">
      <path d="M0,-5L10,0L0,5"></path>
    </marker>
  </defs>
</svg>

我还更新了 Js Fiddle

这篇关于在Chrome SVG图表上，箭头标记-mid被查看了3次，而不是1次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！