HTML :(使用静音类)

<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/