css - SVG 文本周围的矩形边框

Question

尝试在一些 SVG 文本周围放置边框，但我得到了不同的结果。

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 fiddle : http://jsfiddle.net/chrisfrisina/yuRyr/5/

Answer 1

正如您所发现的，SVG 元素不支持 CSS border 属性。您的选择是

1. 画一个红色<rect>围绕文本作为边框
2. 在外面加上边框<svg>元素，如果它的父元素是一个 html 元素。外层<svg>元素是一个替换元素，将支持 CSS 边框属性。