0
185
VisualizaçõesRotar texto alrededor de un pivote
Simplemente estoy tratando de rotar el texto que tiene el centro del círculo como pivote. No tengo claro cómo funciona la rotate(degrees, cx, cy) ( https://svgjs.dev/docs/3.0/manipulating/#rotate ).
var draw = SVG().addTo('body').size(300, 130) var g = draw.group() var rect = g.rect(200, 100).fill('#f06').move(20, 20) var circlePos = [50,50] var circleSize = 50; g.circle(circleSize).fill('#000').move(...circlePos) var labelPos = [50,50] var fontSize = 14 g.text("TEST").addClass("label").font({size: fontSize}).move(circlePos[0] + 5, circlePos[1]).transform({rotate:-45})https://jsfiddle.net/alfredopacino/tLejr1kn/17/
Resultado deseado: 
2 Respostas
Responde à pergunta0
En tu respuesta a fuzzyma tienes esto
caja de transformación: caja de relleno;
No sé qué hace (!), pero si lo eliminas, la rotación parece más sensata.
También debe establecer el origen de la rotación en relación con el grupo. Y debe establecer la posición del texto con mucho cuidado: sospecho que svg.js no coloca el texto como esperaría, por eso estoy buscando aquí. Comprobar con una rotación cero.
0
Como esta pregunta pregunta lo que quería saber, agregaré lo que encontré. svs.js sí se comporta de manera inesperada, pero en el buen sentido, una vez que lo comprende.
.attr({ x: 100, y: 50})coloca el texto como SVG, es decir, la línea de base (en la que se asienta una x pequeña) es 50, y el lado izquierdo del carácter x es 100.
.x(100).y(50)coloca la esquina superior izquierda del glifo. Eso no es lo mismo.
El carácter É es probablemente el carácter alfabético más alto, dependiendo de la fuente, más alto que una X mayúscula.
El tamaño de fuente da la altura del glifo por encima de la línea de base (en unidades de usuario). El glifo también se extiende por debajo de la línea de base con descendientes en, por ejemplo, minúsculas y, g, etc.
Tu .move() está posicionando la esquina superior izquierda. Creo que desea colocarlos de modo que los personajes se sienten en el centro de una línea desde el centro del círculo. .cx() y .cy() posicionan los centros del texto, pero hay 2 errores: el centro calculado no es necesariamente el centro del texto; y los documentos no dan ninguna indicación de cuántos navegadores entienden lo que está sucediendo; es posible que no funcione en el mundo real.
Busqué tu transform-box: fill-box; y probablemente esté interfiriendo con lo que sea que haga svs.js para averiguar qué tan grande es el texto. En cualquier caso, aparentemente no es entendido por el 10% de los navegadores.
Para mi caso, usaré .attr() y cálculos; espero que sea seguro.