如何内联文本和图像

Question

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

我还试图为图像添加一个功能（如果我点击它，就会出现一个网站链接）

这就是我想要复制的内容

An example in image for what I am saying

这是我目前的代码（我已经尝试了一些方法，但没有奏效）

var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 500)
                                     .attr("height", 500);
 
var g = d3.select("svg") .append("g")
 var rectangle = g.append("rect")
                  .attr("x", 0)
                  .attr("y", 0)
                  .attr("width", 300)
                  .attr("height", 200)
                  .style("fill","pink");
                         
 var text = g.append("text")
 .attr("x",150)
 .attr("y",100)
 .attr("text-anchor","middle")
 .text('Nam oc cho')
 
 var img = g.append("image")
 .attr("x",200)
 .attr("y",85)
 .attr("href","firefox.jpg")
 .attr("height","20px")
.attr("width","20px")
                       

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

https://jsfiddle.net/namkhoai16/o7cm9n35/38/

Answer 1

由于文本是用 text-anchor: middle 编写的，所以它在 150 之前有一半长度，在 150 之后有一半长度。所以我们只需要在它的 x 位置加上一半的长度就可以找到它的终点。

var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 500)
                                     .attr("height", 500);
 
var g = d3.select("svg") .append("g")
 var rectangle = g.append("rect")
                  .attr("x", 0)
                  .attr("y", 0)
                  .attr("width", 300)
                  .attr("height", 200)
                  .style("fill","pink");
                         
 var text = g.append("text")
 .attr("x",150)
 .attr("y",100)
 .attr("text-anchor","middle")
 .text('Nam oc cho')
 
 var img = g.append("image")
 .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("height","20px")
.attr("width","20px")
                       

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>