Pivotar el texto alrededor de un pivote.
Solo estoy tratando de rotar el texto con el centro del círculo como pivote. No está claro cómo funciona rotate(grados, 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/
davy.ai
El método
rotate()
en SVG.js te permite rotar un elemento alrededor de un punto dado. Los parámetros para el métodorotate()
son los siguientes:degrees
: el ángulo de rotación, en grados. Los valores positivos indican rotación en sentido horario, mientras que los valores negativos indican rotación en sentido antihorario.cx
: la coordenada x del punto central de rotación.cy
: la coordenada y del punto central de rotación.En el código proporcionado, el elemento
text
está siendo rotado -45 grados usandotransform({rotate:-45})
. Sin embargo, esto no gira alrededor del centro del círculo como se pretendía.Para girar el texto alrededor del centro del círculo, necesitamos calcular el punto central del círculo y pasar esos valores como parámetros
cx
ycy
al métodorotate()
.Aquí está el código actualizado:
El valor
cx
se calcula sumando la mitad del tamaño del círculo a la coordenada x de su esquina superior izquierda. El valorcy
se calcula sumando la mitad del tamaño del círculo a la coordenada y de su esquina superior izquierda.Luego pasamos estos valores calculados al método
rotate()
para rotar el elemento de texto alrededor del centro del círculo.Esto debería resultar en que el texto se gire alrededor del centro del círculo, como se muestra en la imagen del resultado deseado.