Rectangle border around SVG text

Question

Trying to put a border around some SVG text, and I am getting varying results.

HTML: (with the mute class)

Answer 1

To draw a rect around text on click, update the code to:

var svgcanvas = d3.select('svg');

$("#xc").on("click", function (d) {
    var selection = d3.select(this);
    var rect = this.getBBox();
    var offset = 2; // enlarge rect box 2 px on left & right side
    selection.classed("mute", (selection.classed("mute") ? false : true));

    pathinfo = [
        {x: rect.x-offset, y: rect.y }, 
        {x: rect.x+offset + rect.width, y: rect.y}, 
        {x: rect.x+offset + rect.width, y: rect.y + rect.height }, 
        {x: rect.x-offset, y: rect.y + rect.height},
        {x: rect.x-offset, y: rect.y },
    ];

    // Specify the function for generating path data
    var d3line = d3.svg.line()
        .x(function(d){return d.x;})
        .y(function(d){return d.y;})
        .interpolate("linear"); 
    // Draw the line
    svgcanvas.append("svg:path")
        .attr("d", d3line(pathinfo))
        .style("stroke-width", 1)
        .style("stroke", "red")
        .style("fill", "none");

})

On this html: