Comment définir l'origine de la transformation dans SVG

Question

J'ai besoin de redimensionner et de faire pivoter certains éléments dans un document SVG en utilisant le javascript. Le problème est que, par défaut, il applique toujours la transformation autour de l'origine à (0, 0) - en haut à gauche.

Comment puis-je redéfinir ce point d'ancrage de transformation ?

J'ai essayé d'utiliser le transform-origin mais cela n'a aucune incidence.

C'est comme ça que j'ai fait :

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

Il ne semble pas définir le point pivot au point que j'ai spécifié, bien que je puisse voir dans Firefox que l'attribut est correctement défini. J'ai essayé des choses comme center bottom et 50% 100% avec et sans parenthèses. Rien n'a fonctionné jusqu'à présent.

Quelqu'un peut-il m'aider ?

Answer 1

Pour effectuer une rotation, utilisez transform="rotate(deg, cx, cy)" où deg est le degré que vous souhaitez faire pivoter et (cx, cy) définit le centre de rotation.

Pour la mise à l'échelle/le redimensionnement, vous devez effectuer une translation de (-cx, -cy), puis une mise à l'échelle et enfin une translation de retour à (cx, cy). Vous pouvez le faire avec un transformation matricielle :

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

Où sx est le facteur d'échelle dans l'axe des x, sy dans l'axe des y.

Answer 2

svg * { 
  transform-box: fill-box;
}

en appliquant transform-box: fill-box fera en sorte qu'un élément dans un SVG se comporte comme un élément HTML normal. Vous pouvez alors appliquer transform-origin: center (ou autre) comme vous le feriez normalement

c'est vrai, transform-box: fill-box . De nos jours, il n'y a pas besoin d'une matrice compliquée.

Answer 3

Si vous pouvez utiliser une valeur fixe (pas "center" ou "50%"), vous pouvez utiliser CSS à la place :

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

Certains navigateurs (comme Firefox) ne gèrent pas correctement les valeurs relatives.

Answer 4

Pour une mise à l'échelle sans avoir à utiliser le matrix transformation :

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

Et le voici en CSS :

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

Answer 5

Si vous êtes comme moi et que vous voulez faire un panoramique puis un zoom avec transform-origin, vous aurez besoin d'un peu plus.

// <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);
};

Le voici qui fonctionne : http://forresto.github.io/dataflow-prototyping/react/