0 y axis position of SVG g element

January 22, 2022

I must have some misunderstanding about position in svg.

I have a number of g elements one under the other.

Each one has some child elements inside.

When I use transform, I expect the element (in this case the g element with all its content) to move according to the x,y I gave to the translate function.

Why do I see that the 2nd g element has a 0 in its y axis but it still lies right under the 1st g element while the other g elements which have the same content needs a different y axis.

I expected I would need to move the 2nd g element 30 + 50 ( 30, the height of the rect in the 1st g element and 50 for the g translate y axis

 <g transform="translate(-5, 0)">
            <line x1="150" y1="88" x2="150" y2="145" stroke="#3278E0" stroke-width="1" marker-end="url(#arrowEnd)"
                marker-start="url(#arrowStart)"></line>
        </g>

Here’s the fiddle:
https://jsfiddle.net/fLbz6qn1/35/

>Solution :

It 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>