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>