Cómo configurar el origen de la transformación en SVG

Necesito cambiar el tamaño y rotar ciertos elementos en un documento SVG usando javascript. El problema es que, por defecto, siempre aplica la transformación alrededor del origen en la (0, 0)parte superior izquierda.

¿Cómo puedo volver a definir este punto de ancla de transformación?

Intenté usar el transform-originatributo, pero no afecta nada.

Así es como lo hice:

svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');

No parece establecer el punto de pivote en el punto que especifiqué, aunque puedo ver en Firefox que el atributo está configurado correctamente. Probé cosas como center bottomy 50% 100%con y sin paréntesis. Nada funcionó hasta ahora.

¿Alguien puede ayudar?

Para rotar use transform="rotate(deg, cx, cy)", donde deg es el grado que desea rotar y (cx, cy) define el centro de rotación.

Para escalar / cambiar el tamaño, debe traducir por (-cx, -cy), luego escalar y luego traducir de nuevo a (cx, cy). Puede hacer esto con una transformación de matriz :

transform="matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)"

Donde sx es el factor de escala en el eje x, sy en el eje y.

Si puede usar un valor fijo (no "centro" o "50%"), puede usar CSS en su lugar:

-moz-transform-origin: 25px 25px;
-ms-transform-origin:  25px 25px;
-o-transform-origin: 25px 25px;
-webkit-transform-origin:  25px 25px;
transform-origin: 25px 25px;

Algunos navegadores (como Firefox) no manejarán los valores relativos correctamente.

Si eres como yo y quieres desplazarte y luego hacer zoom con transform-origin, necesitarás un poco más.

// <g id="view"></g>
var view = document.getElementById("view");

var state = {
  x: 0,
  y: 0,
  scale: 1
};

// Origin of transform, set to mouse position or pinch center
var oX = window.innerWidth/2;
var oY = window.innerHeight/2;

var changeScale = function (scale) {
  // Limit the scale here if you want
  // Zoom and pan transform-origin equivalent
  var scaleD = scale / state.scale;
  var currentX = state.x;
  var currentY = state.y;
  // The magic
  var x = scaleD * (currentX - oX) + oX;
  var y = scaleD * (currentY - oY) + oY;

  state.scale = scale;
  state.x = x;
  state.y = y;

  var transform = "matrix("+scale+",0,0,"+scale+","+x+","+y+")";
  //var transform = "translate("+x+","+y+") scale("+scale+")"; //same
  view.setAttributeNS(null, "transform", transform);
};

Aquí está funcionando: http://forresto.github.io/dataflow-prototyping/react/

Para escalar sin tener que usar la matrixtransformación:

transform="translate(cx, cy) scale(sx sy) translate(-cx, -cy)"

Y aquí está en CSS:

transform: translate(cxpx, cypx) scale(sx, sy) translate(-cxpx, -cypx)

parece que todos nos hemos perdido un truco aquí: transform-box: fill-box

el uso transform-box: fill-boxhará que un elemento dentro de un SVG se comporte como un elemento HTML normal. Luego puede aplicar transform-origin: center(o algo más) como lo haría normalmente

eso es correcto, transform-box: fill-boxno hay necesidad de cosas complicadas de matriz

Tuve un problema similar. Pero estaba usando D3 para colocar mis elementos y quería que la transformación y la transición fueran manejadas por CSS. Este era mi código original, que conseguí trabajar en Chrome 65:

//...
this.layerGroups.selectAll('.dot')
  .data(data)
  .enter()
  .append('circle')
  .attr('transform-origin', (d,i)=> `${valueScale(d.value) * Math.sin( sliceSize * i)} 
                                     ${valueScale(d.value) * Math.cos( sliceSize * i + Math.PI)}`)
//... etc (set the cx, cy and r below) ...

Esto permitió que fije las cx, cyy transform-originlos valores en JavaScript utilizando los mismos datos.

¡PERO esto no funcionó en Firefox! Lo que tenía que hacer era envolver el circleen la getiqueta y translateusando la misma fórmula de posicionamiento desde arriba. Luego agregué el circleen la getiqueta y establecí sus valores cxy cyen 0. A partir de ahí, transform: scale(2)escalaría desde el centro como se esperaba. El código final se ve así.

this.layerGroups.selectAll('.dot')
  .data(data)
  .enter()
  .append('g')
  .attrs({
    class: d => `dot ${d.metric}`,
    transform: (d,i) => `translate(${valueScale(d.value) * Math.sin( sliceSize * i)} ${valueScale(d.value) * Math.cos( sliceSize * i + Math.PI)})`
  })
  .append('circle')
  .attrs({
    r: this.opts.dotRadius,
    cx: 0,
    cy: 0,
  })

Después de realizar este cambio, cambié mi CSS para apuntar al en circlelugar de .dot, para agregar el transform: scale(2). Ni siquiera necesitaba uso transform-origin.

NOTAS:

1. Estoy usando d3-selection-multien el segundo ejemplo. Esto me permite pasar un objeto a en .attrslugar de repetir .attrpara cada atributo.

2. Cuando utilice un literal de plantilla de cadena, tenga en cuenta los saltos de línea como se ilustra en el primer ejemplo. Esto incluirá una nueva línea en la salida y puede romper su código.