SVG文本周围的矩形边框

问题描述

尝试在某些SVG文字周围放置边框，我得到不同的结果。

Trying to put a border around some SVG text, and I am getting varying results.

HTML：（使用静音类）

HTML: (with the mute class)

<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 没有静音类

Here we have the X without the mute class

这里我们将 X 与静音类但没有边框

Here we have the X with the mute class but without the border

这是我们正试图获得的边框看起来像

This is what we are trying to get the border to look like

注意：其父项是一个组，而不是HTML元素。

Note: its parent is a group, not an HTML element.

JS小提琴：

推荐答案

SVG元素不支持您已发现的CSS边框属性。您的选项为

SVG elements don't support the CSS border property as you have discovered. Your options are

1. 在文字四周绘制红色< rect> 边框


2. 如果父元素是html元素，请在外部< svg> 元素上放置边框。外部< svg> 元素是替换的元素，将支持CSS边框属性。

1. Draw a red <rect> around the text as a border
2. Put a border on the outer <svg> element if its parent is a html element. The outer <svg> element is a replaced element and will support the CSS border property.

这篇关于SVG文本周围的矩形边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！