css - Rectangle border around SVG text -

Some SVGs are trying to keep a border around the text, and I'm getting different results.

HTML: (with mute class)

  & lt; Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1" & gt; & Lt; Text x = "37.5" y = "37.5" square = "ablate-x mute" & gt; X & lt; / Text & gt; & Lt; / Svg & gt;   
 CSS:  
  .babate-x {font-size: 24px; Color: Gray; Opacity: 0.5; Font-weight: 900; Cursor: hand; Cursor: indicator; }. Mute {Opacity: 1; Fill: Red; Stroke: red; Stroke-width: 2px; / * We tried the border: 2px solid red; But this did not work * /}   
 D3.js:  
  .on ("click", function (d) {var selection = d3 ( Selection). ("Mute") wrong: true));})   
 Here we have . X  without mute class   
 Here we have the  x <  
  
  
 This is the same as we < Img src = "https://i.stack.imgur.com/Lbuni.png" alt = "red with border">  
 Trying to get the border to look like a note Are: its parent is a group, not an HTML element.  
 JS Fiddle:   
 
 
 Do not support SVG element CSS border property as you did Has been found            ; SVG & gt;  element if its original HTML element is  & lt; Svg & gt;  element is a substitute element and CSS will support border property.