Question

我知道d3根据调用的顺序渲染元素。因此，如果要在黑色矩形上呈现白色文本，可以先调用rect，然后再调用白色文本。

但是，在我的特定情况下，rect的尺寸基于我的白色文本，因此我必须先调用白色文本。

我发现一种解决方法是使用 use标签，但是我无法使其正常工作，这是我目前的尝试：

文本：

      var textToolTip = gToolTip
        .append("text")

        .attr("id", "toUse")
        .text(.....)...

使用标签：

var useText = gToolTip.append("use").attr("xlink:xlink:href", "#toUse");

我也尝试过给textToolTip xlink：href，但是没有用。对于use标签，我尝试使用xlink：href而不是xlink：xlink：href，它没有用。我使用double xlink是因为找到了以下答案：How do I define an SVG doc under <defs>, and reuse with the <use> tag?

Answer 1

如果我对您的理解正确，则添加矩形，添加文本，然后将矩形的大小设置为文本会更简单：

<!DOCTYPE html>
<html>

  <head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>

  <body>
    <svg width="900" height="900"></svg>
    <script>
      
      var svg = d3.select('svg');
      
      var rect = svg.append("rect")
        .style("fill", "black")
        .attr("x", 20)
        .attr("y", 20);
      
      var text = svg.append("text")
        .text("Now is the time for all good men to come to the aid of their country")
        .attr("x", 20)
        .attr("y", 20)
        .attr("alignment-baseline","hanging")
        .style("fill","steelblue")
        .style("font-family", "arial")
        .style("font-size", "14pt")
        
      var bbox = text.node().getBBox();
      
      rect.attr("width", bbox.width);
      rect.attr("height", bbox.height);
    </script>
  </body>

</html>

如何在带有d3 js的SVG中正确使用Use标签？

1 个答案: