Svg如何像浮动一样左右定位元素？

Question

我正在dagre-d3，js和d3.js的帮助下构建组织结构图。

它基于svg，所以图表中的每个人都需要有某种员工卡（或称之为个人资料卡）

此卡需要显示人员名称，他的组并有2个按钮，一个用于删除，只有一些弹出模式数据。

所以这就是我希望它的结构：

基本的东西，对吧？

那么如何使用svg设置样式并创建它？

这就是我现在所拥有的：

<g class="node" transform="translate(307.828125,163.5)" style="opacity: 1;">
    <rect rx="0" ry="0" x="-79.5" y="-29.5" width="159" height="59"></rect>
    <g class="label" transform="translate(0,0)">
        <g transform="translate(-49.5, -8)">
            <g class="employee-card">
                <text dx="-15" y="4" class="title">
                    <tspan dx="-15" class="person-name">Bakos Róbert</tspan>
                    <tspan x="-15" dy="22" class="le-name">Delphi fejlesztő</tspan>
                </text>
                <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/media/images/hierarchy/delete.png" width="16" height="16"></image>
            </g>
        </g>
    </g>
</g>

它并不好，因为对于我想要使用图像的按钮但我似乎无法弄清楚如何将图像（btn）变为右上角，因为这些卡可以更长或更短，所以它们的尺寸是静态？

Answer 1

SVG没有像HTML这样的自动布局。

您必须将<image>置于您想要的位置。为此，只需将x和y属性添加到<image>。