title: Rectangle border around SVG text
body: <p>Trying to put a border around some SVG text, and I am getting varying results.</p>
  
  <p>HTML: (with the mute class)</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
    &lt;text x="37.5" y="37.5" class="ablate-x mute"&gt;X&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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 */
  }
  </code></pre>
  
  <p>D3.js:</p>
  
  <pre><code>.on("click", function(d) {
      var selection = d3.select(this);
      selection.classed("mute", (selection.classed("mute") ? false : true));
   })
  </code></pre>
  
  <p>Here we have the <code>X</code> without the mute class <img src="https://i.stack.imgur.com/45WYl.png" alt="grey"></p>
  
  <p>Here we have the <code>X</code> with the mute class <img src="https://i.stack.imgur.com/lc0dm.png" alt="red"> but without the border</p>
  
  <p>This is what we are trying to get the border to look like <img src="https://i.stack.imgur.com/Lbuni.png" alt="red with border"></p>
  
  <p>Note: its parent is a group, not an HTML element.</p>
  
  <p>JS Fiddle:
  <a href="http://jsfiddle.net/chrisfrisina/yuRyr/5/" rel="noreferrer">http://jsfiddle.net/chrisfrisina/yuRyr/5/</a></p>