JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:200px;height:200px;">
  <text x="50" y="30" fill="red" text-anchor="start">I love SVG</text>
</svg>

JavaScript

var initOffset = { dx: 0, dy: 0, set: false };

var dragStart = function (d, i) {
    initOffset.set = false;
}

var dragMove = function (d,i) {
    var textElem = d3.select(this);
    if (!initOffset.set) {
        initOffset.dx = textElem.attr('x') - d3.event.x;
        initOffset.dy = textElem.attr('y') - d3.event.y;
        initOffset.set = true;
    }
    
    textElem.attr("x", d3.event.x + initOffset.dx)
                .attr("y", d3.event.y + initOffset.dy);
};

var dragEnd = function (d,i) {
    //d3.select(this).attr("text-anchor", "start");
};

var drag = d3.behavior.drag()
                .on("dragstart", dragStart)
                .on("drag", dragMove)
                .on("dragend", dragEnd);

d3.select("svg")
    .select("text")
    .call(drag);