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

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

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

J'ai essayé d'utiliser l' transform-originattribut, mais cela n'affecte rien.

Voici comment je l'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 bottomet 50% 100%avec et sans parenthèses. Rien n'a fonctionné jusqu'à présent.

Quelqu'un peut-il aider?

Pour faire pivoter, 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 / redimensionnement, vous devez traduire par (-cx, -cy), puis mettre à l'échelle et ensuite traduire en (cx, cy). Vous pouvez le faire avec une transformation matricielle :

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

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

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.

Si vous êtes comme moi et que vous souhaitez effectuer un panoramique et un zoom avec l'origine de la transformation, 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);
};

Ici, cela fonctionne: http://forresto.github.io/dataflow-prototyping/react/

Pour une mise à l'échelle sans avoir à utiliser la matrixtransformation:

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)

il semble que nous ayons tous manqué un truc ici: transform-box: fill-box

en utilisant transform-box: fill-box, un élément dans un SVG se comportera comme un élément HTML normal. Ensuite, vous pouvez postuler transform-origin: center(ou autre chose) comme vous le feriez normalement

c'est vrai, transform-box: fill-boxpas besoin de trucs matriciels compliqués

J'ai eu un problème similaire. Mais j'utilisais D3 pour positionner mes éléments, et je voulais que la transformation et la transition soient gérées par CSS. C'était mon code d'origine, que j'ai fait travailler dans 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) ...

Cela m'a permis de définir les cx, cyet les transform-originvaleurs en javascript en utilisant les mêmes données.

MAIS cela n'a pas fonctionné dans Firefox! Ce que je devais faire était envelopper la circledans l' gétiquette et translateen utilisant la même formule de positionnement d' en haut. J'ai ensuite ajouté le circledans la gbalise et défini ses valeurs cxet cysur 0. À partir de là, transform: scale(2)serait mis à l'échelle du centre comme prévu. Le code final ressemblait à ceci.

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,
  })

Après avoir apporté ce changement, j'ai changé mon CSS pour cibler le circleplutôt que le .dot, pour ajouter le transform: scale(2). Je n'avais même pas besoin d'être utilisé transform-origin.

REMARQUES:

1. J'utilise d3-selection-multidans le deuxième exemple. Cela me permet de passer un objet au .attrslieu de le répéter .attrpour chaque attribut.

2. Lorsque vous utilisez un littéral de modèle de chaîne, tenez compte des sauts de ligne, comme illustré dans le premier exemple. Cela inclura une nouvelle ligne dans la sortie et peut casser votre code.