0 SVG g 元素的 y 轴位置

Question

我一定是对svg中的position有什么误解。

我有很多 g 元素一个下一个。

每一个里面都有一些子元素。

当我使用 transform 时，我希望元素（在本例中为 g 元素 及其所有内容）根据我给 translate 函数的 x,y。

为什么我看到 2nd g 元素 在其 y 轴 中有一个 0 ] 但它仍然位于第一个 g 元素的正下方，而具有相同内容的其他 g 元素需要不同的 y 轴。

我预计我需要将第二个 g 元素移动 30 + 50（30，第一个 g 元素中 rect 的高度和 g 平移 y 轴的 50

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

这是 fiddle： https://jsfiddle.net/fLbz6qn1/35/

Answer 1

这是因为该行的 y1 属性。第一行需要从顶部开始 88 个单位。它的组向下翻译 0 个单位，但它的 y1 从 88 开始。

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

0 SVG g 元素的 y 轴位置

0 y axis position of SVG g element

svg

d3.js