SVG 矩形边框，而不是中风

Question

我正在制作一个 d3 图表并尝试在我的 rect 元素周围放置一个边框。 rect 元素附加到一个单元格，文本元素附加到同一个单元格。因此，如果我更改矩形中的笔画，我会由于某种原因丢失所有文本，如果我更改单元格中的笔画，边框和字体也会发生变化。

这是我绘制图表的部分代码。

this.svg = d3.select("#body").append("div")

          .attr("class", "chart")
          .style("position", "relative")
          .style("width", (this.w +this.marginTree.left+this.marginTree.right) + "px")
          .style("height", (this.h + this.marginTree.top + this.marginTree.bottom) + "px")
          .style("left", this.marginTree.left +"px")
          .style("top", this.marginTree.top + "px")
        .append("svg:svg")
          .attr("width", this.w)
          .attr("height", this.h)
        .append("svg:g")
          .attr("transform", "translate(.5,.5)");


        this.node = this.root = this.nestedJson;



        var nodes = this.treemap.nodes(this.root)
            .filter(function(d) { return !d.children; });

        this.tip = d3.tip()
              .attr('class', 'd3-tip')
              .html(function(d) {
                return "<span style='color:white'>" + (d.name+",\n "+d.size) + "</span>";
              })
        this.svg.call(this.tip);



        var cell = this.svg.selectAll("g")
            .data(nodes)
            .enter().append("svg:g")
            .attr("class", "cell")
            .call(this.position)
            .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
            .on("click", function(d) { return this.zoom(this.node == d.parent ? this.root : d.parent); })
            .style("border",'black');

        var borderPath = this.svg.append("rect")
            .attr("x", this.marginTree.left)
            .attr("y", this.marginTree.top)
            .attr("height", this.h - this.marginTree.top - this.marginTree.bottom )
            .attr("width", this.w - this.marginTree.left - this.marginTree.right)
            .style("stroke", 'darkgrey')
            .style("fill", "none")
            .style("stroke-width", '3px');


        cell.append("svg:rect")

            .attr("id", function(d,i) { return "rect-" + (i+1); })
            .attr("class","highlighting2")
                .attr("title", function(d) {return (d.name+", "+d.size);})
                .attr("data-original-title", function(d) {return (d.name+",\n "+d.size);})
          .attr("width", function(d) { return d.dx - 1; })
          .attr("height", function(d) { return d.dy ; })
          .on('mouseover', this.tip.show)
                .on('mouseout', this.tip.hide)
          .style("fill", function(d) {return coloring(d.color);});


        cell.append("svg:text")
            .attr("class", "treemap-text nameTexts") 
            .attr("id", function(d,i) { return "name-" + (i+1); })
            .attr("x", cellMargin)  
            .attr("y", function(d) {  return parseInt($('.treemap-text').css('font-size'))+cellMargin; })
          .text(function(d) {return (d.name);});

       cell.append("svg:text")
            .attr("class", "treemap-text sizeTexts") 
            .attr("id", function(d,i) { return "size-" + (i+1); })  
            .attr("x", cellMargin)  
            .attr("y", function(d) {  return 2*parseInt($('.treemap-text').css('font-size'))+2*cellMargin; })
            .text(function(d) {return (d.size);});

此外，我考虑过在每个矩形元素周围创建线条并绘制四条线，但想知道是否有更简单的方法。谢谢。

Answer 1

我没有仔细检查您的来源，使用 jsbin、codepen、jsfiddle 或其他在线平台来展示您的问题也会有所帮助。

实际上，我认为您只是误解了 SVG 表示属性及其使用 CSS 的样式。对于 SVG 元素，只有 SVG 表示属性在 CSS 中有效。这意味着您的代码中没有边框属性。另请注意，对于<text> 元素，填充颜色是字体的主体颜色，而笔划是字体的轮廓。考虑到描边和填充被继承到子元素，这意味着如果你有一个带有描边样式的矩形和一些包含文本元素的矩形，它们会将描边应用为轮廓，你需要覆盖那里的样式。

希望您能解决您的问题。

干杯 只园