Svg 如何内联文本和图像 我有一个长方形，我想把一个文本和一个小的图像放在中间（图像和文本是内联的）。图像和文本必须有一个固定的间隙，所以当我改变文本的长度时，图像仍然与文本有一个固定的间隙

我还试图给图片添加一个功能（如果我点击了它，就会出现一个指向网站的链接）

这就是我想要复制的

这是到目前为止我的代码（我尝试了一些方法，但都不起作用）

var svgContainer=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var g=d3.选择（“svg”）.追加（“g”）
var rectangle=g.append（“rect”）
.attr（“x”，0）
.attr（“y”，0）
.attr（“宽度”，300）
.attr（“高度”，200）
.样式（“填充”、“粉色”）；
var text=g.append（“文本”）
.attr（“x”，150）
.attr（“y”，100）
.attr（“文本锚定”、“中间”）
.text（'Nam oc cho'）
var img=g.append（“图像”）
.attr（“x”，200）
.attr（“y”，85）
.attr（“href”，“firefox.jpg”）
.attr（“高度”，“20px”）
.attr（“宽度”，“20px”）

---

因为文本是用文本定位点编写的：中间部分在150之前有一半长度，在150之后有一半长度。所以我们只需要把它的一半长度加到它的x位置，就可以找到它的端点

var svgContainer=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var g=d3.选择（“svg”）.追加（“g”）
var rectangle=g.append（“rect”）
.attr（“x”，0）
.attr（“y”，0）
.attr（“宽度”，300）
.attr（“高度”，200）
.样式（“填充”、“粉色”）；
var text=g.append（“文本”）
.attr（“x”，150）
.attr（“y”，100）
.attr（“文本锚定”、“中间”）
.text（'Nam oc cho'）
var img=g.append（“图像”）
.attr（“x”，150+text.node（）.getComputedTextLength（）/2）
.attr（“y”，85）
.attr（“href”https://cnet2.cbsistatic.com/img/0ssO7VfSYSEzbQVQ6uK6FYamQx4=/940x0/2014/06/13/c582d2aa-092e-4d29-a616-a1e5c9403b36/firefox-logo-2014-vertical-4sts.jpg“）
.attr（“高度”，“20px”）
.attr（“宽度”，“20px”）

---

为什么没有图像？SVG不能进行回流，因此如果没有javascript，当文本长度发生变化时，您将无法移动图像。我正在尝试使用d3.js进行回流，但我不知道如何进行回流。我刚刚编辑了我的问题。非常感谢您的帮助，您是最棒的