Accepted answer

You can simply put the image and text in a group container and adjust the text position relatively as shown below.


const svg ="body")
  .attr("width", 1000)
  .attr("height", 1000);

var widthMarker = 50;

var imgContainer = svg.append("g")
  .attr("transform", "translate(228,53)");

var img = imgContainer.append("svg:image")
  .attr("xlink:href", "")
  .attr("width", widthMarker)
  .attr("height", widthMarker);

var text = imgContainer.append("svg:text")
  .attr("dy", widthMarker/2)
  .text("hello world");

text.attr("dx", (widthMarker - text.node().getComputedTextLength()) / 2);
<script src=""></script>

Related Query

More Query from same tag