0
185
VistasSVG poner texto circular sobre una línea
Tengo este reloj y necesito poner los números arriba como pueden ver:
Sé la posición de cada línea, pero si creo un texto con x, y y ángulo como:
<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> Entiendo esto: 
¿Cómo podría poner el texto exactamente en el medio de la línea y tiene texto circular en lugar de esto?
2 Respuestas
Responde la pregunta0
Para cada <text> establezca x = 0 , y = -radius y 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>0
En este ejemplo, cada <text> es hijo de <g> y todos los <g> son hijos de un contenedor <g> . El contenedor se traslada al centro y cada <text> tiene un valor negativo de -44 que mueve el texto fuera del círculo. A continuación, se giran todos los <g> s. El contenedor también se gira (-20) para girar todo en su lugar.
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> Los <text> s también pueden ser horizontales girándolos "hacia atrás" después de rotar el padre <g> (pero puede ver que son más difíciles de colocar con la misma distancia del círculo):
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>