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

我们在X设置了静音类 red ，但没有边框

我们正试图让边框看起来像 red with border

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

JS小提琴： http://jsfiddle.net/chrisfrisina/yuRyr/5/

Answer 1

SVG元素不支持您发现的CSS border属性。你的选择是

在文本周围绘制一个红色<rect>作为边框
如果外部<svg>元素的父元素是html元素，则在其上放置一个边框。外部<svg>元素是替换元素，将支持CSS边框属性。

Answer 2

要在单击时围绕文本绘制矩形，请将代码更新为：

var svgcanvas = d3.select('svg');

$("#xc").on("click", function (d) {
    var selection = d3.select(this);
    var rect = this.getBBox();
    var offset = 2; // enlarge rect box 2 px on left & right side
    selection.classed("mute", (selection.classed("mute") ? false : true));

    pathinfo = [
        {x: rect.x-offset, y: rect.y }, 
        {x: rect.x+offset + rect.width, y: rect.y}, 
        {x: rect.x+offset + rect.width, y: rect.y + rect.height }, 
        {x: rect.x-offset, y: rect.y + rect.height},
        {x: rect.x-offset, y: rect.y },
    ];

    // Specify the function for generating path data
    var d3line = d3.svg.line()
        .x(function(d){return d.x;})
        .y(function(d){return d.y;})
        .interpolate("linear"); 
    // Draw the line
    svgcanvas.append("svg:path")
        .attr("d", d3line(pathinfo))
        .style("stroke-width", 1)
        .style("stroke", "red")
        .style("fill", "none");

})

关于这个html：

    <!DOCTYPE html>
    <html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>
    <body>
        <svg width="720" height="720">
            <text x="37.5" y="37.5" id="xc">X</text>
        </svg>
    </body>
    </html>

SVG文本周围的矩形边框

2 个答案: