主页 / 问题 / 974901
Accepted
manking
Asked:2020-04-25 22:01:31 +0000 UTC2020-04-25 22:01:31 +0000 UTC

如何在svg中的组内居中文本？

  • 772

如何在g内居中文本？

在这里，您需要文本“中心文本”位于组的中心<g class="point""> https://jsfiddle.net/wpvk3c64/4/

让它发挥作用 在此处输入图像描述

html

1 个回答

  1. Best Answer

    有一件事，但是组的大小取决于其中元素的位置，所以我将文本移到组外，否则算法很简单：

    我计算了锚点并将文本相对于它居中text-anchor="middle" dominant-baseline="middle"

    let bbox = document.querySelector('svg g.point').getBBox();
let text = document.querySelector('svg text');
text.setAttributeNS(null, "x", bbox.x+bbox.width/2);
text.setAttributeNS(null, "y", bbox.y+bbox.height/2);
    <svg width="400" height="400">
    <g class="point">
      <circle></circle>
      <rect x="10" y="10" width="100" height="100"/>
      <rect x="140" y="10" width="100" height="100" fill="green"/>
    </g>
    <text font-size=30 fill="red" class="pointIndex" text-anchor="middle" dominant-baseline="middle">
      Текст по центру
    </text>
  </svg>

    PS：不能算什么，要从图片本身的大小开始svg，也就是放在图片本身的中心<text x="50%" y="50%"。

    • 2

相关问题