Question

我正在尝试放置一个文本，使其位于我的元素的中心，如下图所示：

我希望动态完成，具体取决于图像的大小。

我该怎么做？

  <body>
  <script type="text/javascript">
    const svg = d3.select("body").append("svg").attr("width",1000).attr("height",1000);
    var widthMarker=50;
    var img = svg.append("svg:image")
        .attr("xlink:href", "marker.svg")
        .attr("width", widthMarker)
        .attr("height", widthMarker)
        .attr("x", 228)
        .attr("y",53);

        svg.append("text").attr("width",100).attr("height",100).text("hello world");



  </script>
  </body>

http://plnkr.co/edit/39zEvnjOmotZXYF2GFwq?p=preview

Answer 1

您可以简单地将图像和文本放在一个组容器中，并相对调整文本位置，如下所示。

Plunker

＆＃13;

const svg = d3.select("body")
  .append("svg")
  .attr("width", 1000)
  .attr("height", 1000);

var widthMarker = 50;

var imgContainer = svg.append("g")
  .attr("transform", "translate(228,53)");

var img = imgContainer.append("svg:image")
  .attr("xlink:href", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgfLDf_0gBVxWp_7ec2UR3Dro5rBXquElgRdSH6K8LQQ7QanSQ")
  .attr("width", widthMarker)
  .attr("height", widthMarker);

var text = imgContainer.append("svg:text")
  .attr("dy", widthMarker/2)
  .text("hello world");

text.attr("dx", (widthMarker - text.node().getComputedTextLength()) / 2);

＆＃13;

<script src="https://d3js.org/d3.v3.min.js"></script>

＆＃13;

如何使用d3.js将文本居中在svg图像上？

1 个答案: