On Chrome Svg Chart Arrowhead Marker-mid Is Viewed 3 Times Instead 1

I have created simple force chart in D3.js. There are nodes and between nodes there are links with the markers in the middle (using marked-mid). The problem is that for some reas

Solution 1:

If someone is looking for an answer.

@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.

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

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

Also I have updated Js Fiddle