javascript - Svg 如何像 float 一样左右定位元素？

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> 的属性.