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