SVG 将圆形文本放在一行上答案

【问题标题】：SVG put circular text over a lineSVG 将圆形文本放在一行上
【发布时间】：2022-01-27 03:29:05
【问题描述】：

我有这个时钟，我需要把数字写在上面，如你所见：

我知道每一行的位置，但如果我创建一个带有 x、y 和角度的文本，例如：

<text *ngFor="let line of lines; let index = i" [attr.rotate]="line.angle"
      [attr.x]="line.x1" [attr.y]="line.y1" [id]="'text'+index">
  <tspan class="number">20</tspan>
</text>

我明白了：

我怎样才能将文本准确地放在行的中间并使用圆形文本而不是这个？

【问题讨论】：

标签： javascript css svg

【解决方案1】：

对于每个<text> 设置x = 0、y = -radius 和transform='rotate(index * angle)'：

const SECTORS = 16;
const RADIUS = 70;

const g = d3.select('g');
for (let i = 0; i < SECTORS; i++) {
    g.append('text')
    .text('20')
    .attr('x', 0)
    .attr('y', -RADIUS)
    .attr('transform', `rotate(${i * 360 / SECTORS})`)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="200" height="200">
  <g transform="translate(100,100)"/>
</svg>

【讨论】：

【解决方案2】：

在此示例中，每个 <text> 都是 <g> 的子代，所有 <g>s 都是容器 <g> 的子代。容器被平移到中心，每个<text> 都有一个负值-44，将文本移到圆圈外。然后旋转所有<g>s。容器也会旋转 (-20) 以将整个物体旋转到位。

const container = document.getElementById('container');

Object.keys([...Array(13)]).forEach(i => {
  let t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  t.setAttribute('y', '-44');
  t.textContent = i*5;
  let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  g.setAttribute('transform', `rotate(${i*20})`);
  g.append(t);
  container.append(g);
});

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="250">
  <circle cx="50" cy="50" r="40" fill="none" stroke="black" stroke-width="1" />
  <g id="container" transform="translate(50 50) rotate(-20)"
     font-size="8" text-anchor="middle" dominant-baseline="text-bottom">
  </g>
</svg>

<text>s 也可以通过在旋转父 <g> 后将它们“向后”旋转来水平放置（但你可以看到它们更难放置在与圆等距离的位置）：

const container = document.getElementById('container');

Object.keys([...Array(13)]).forEach(i => {
  let t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  t.setAttribute('transform', `translate(0 -46) rotate(${-i*20+20})`);
  t.textContent = i*5;
  let g2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  g2.setAttribute('transform', `rotate(${i*20-20})`);
  g2.append(t);
  container.append(g2);
});

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="250">
  <circle cx="50" cy="50" r="40" fill="none" stroke="black" stroke-width="1" />
  <g id="container" transform="translate(50 50)"
     font-size="8" text-anchor="middle" dominant-baseline="middle">
  </g>
</svg>

【讨论】：