css - SVG テキストを囲む四角形の境界線

Question

一部の SVG テキストの周囲に境界線を配置しようとすると、さまざまな結果が得られます。

HTML: (mute クラスを使用)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="37.5" y="37.5" class="ablate-x mute">X</text>
</svg>

CSS:

.ablate-x {
   font-size: 24px;
   color: gray;
   opacity: 0.5;
   font-weight: 900;
   cursor: hand;
   cursor: pointer;
}

.mute {
   opacity: 1;
   fill: red;
   stroke: red;
   stroke-width: 2px;
   /* we tried border: 2px solid red;   but it didn't work */
}

D3.js:

.on("click", function(d) {
    var selection = d3.select(this);
    selection.classed("mute", (selection.classed("mute") ? false : true));
 })

ここではX、ミュート クラスなしで

ここにはX、ミュート クラスがありますが、境界線はありません。

これは、境界線を次のように見せようとしているものです

注: その親は、HTML 要素ではなく、グループです。

JS フィドル: http://jsfiddle.net/chrisfrisina/yuRyr/5/