0 y axis position of SVG g element
Solution 1:
It's because of the line's y1
attribute. The first line needs to start 88 units from the top. Its group translates 0 units down, but it's y1
begins at 88
.
<line x1="150" y1="88" x2="150" y2="145" stroke="#3278E0" stroke-width="1" marker-end="url(#arrowEnd)"
marker-start="url(#arrowStart)"></line>