我有這個時鐘，我需要把數字放在上面，如你所見：
我知道每一行的位置，但如果我創建一個帶有 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>
我明白了：
我怎樣才能將文本完全放在行的中間并使用圓形文本而不是這個？
uj5u.com熱心網友回復：
對于<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>uj5u.com熱心網友回復：
在這個例子中，每個<text>都是 a 的孩子，<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/421756.html
標籤：