So legen Sie den Transformationsursprung in SVG fest

Ich muss die Größe bestimmter Elemente im SVG-Dokument mithilfe von Javascript ändern und drehen. Das Problem ist, dass standardmäßig immer die Transformation um den Ursprung (0, 0)oben links angewendet wird.

Wie kann ich diesen Transformationsankerpunkt neu definieren?

Ich habe versucht, das transform-originAttribut zu verwenden, aber es hat keine Auswirkungen.

So habe ich es gemacht:

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

Es scheint nicht, dass der Drehpunkt auf den von mir angegebenen Punkt gesetzt wird, obwohl ich in Firefox sehen kann, dass das Attribut korrekt gesetzt ist. Ich habe Dinge wie center bottomund 50% 100%mit und ohne Klammern ausprobiert . Bisher hat nichts funktioniert.

Kann jemand helfen?

Zum Drehen verwenden Sie transform="rotate(deg, cx, cy)", wobei deg der Grad ist, den Sie drehen möchten, und (cx, cy) den Drehpunkt definieren.

Zum Skalieren / Ändern der Größe müssen Sie mit (-cx, -cy) übersetzen, dann skalieren und dann zurück nach (cx, cy) übersetzen. Sie können dies mit einer Matrixtransformation tun :

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

Wobei sx der Skalierungsfaktor auf der x-Achse ist, sy auf der y-Achse.

Wenn Sie einen festen Wert verwenden können (nicht "Mitte" oder "50%"), können Sie stattdessen CSS verwenden:

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

Einige Browser (wie Firefox) verarbeiten relative Werte nicht korrekt.

Wenn Sie wie ich sind und mit transform-origin schwenken und dann zoomen möchten, benötigen Sie etwas mehr.

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

Hier funktioniert es: http://forresto.github.io/dataflow-prototyping/react/

Zum Skalieren, ohne die matrixTransformation verwenden zu müssen:

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

Und hier ist es in CSS:

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

es sieht so aus, als hätten wir alle hier einen Trick verpasst: transform-box: fill-box

Mit using transform-box: fill-boxverhält sich ein Element in einer SVG wie ein normales HTML-Element. Dann können Sie sich wie gewohnt bewerben transform-origin: center(oder etwas anderes)

Das ist richtig, transform-box: fill-boxkeine Notwendigkeit für komplizierte Matrix-Sachen

Ich hatte ein ähnliches Problem. Aber ich habe D3 verwendet, um meine Elemente zu positionieren, und wollte, dass die Transformation und der Übergang von CSS übernommen werden. Dies war mein ursprünglicher Code, den ich in Chrome 65 zum Laufen gebracht habe:

//...
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) ...

Das erlaubte mir , die zu setzen cx, cyund transform-originWerte in Javascript , die gleichen Daten.

ABER das hat in Firefox nicht funktioniert! Was ich tun musste, war das circlein das gTag zu wickeln und translatees mit der gleichen Positionierungsformel von oben zu verwenden. Ich habe dann das circleim gTag angehängt und seine cxund cyWerte auf gesetzt 0. Von dort transform: scale(2)würde wie erwartet vom Zentrum aus skaliert. Der endgültige Code sah so aus.

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

Nachdem ich diese Änderung vorgenommen hatte, änderte ich mein CSS so, dass es auf das Ziel circleanstatt auf das .dotabzielte, das hinzuzufügen transform: scale(2). Ich brauchte nicht einmal Gebrauch transform-origin.

ANMERKUNGEN:

1. Ich benutze d3-selection-multiim zweiten Beispiel. Dadurch kann ich ein Objekt übergeben, .attrsanstatt es .attrfür jedes Attribut zu wiederholen .

2. Beachten Sie bei der Verwendung eines Zeichenfolgenvorlagenliteral die Zeilenumbrüche, wie im ersten Beispiel dargestellt. Dies enthält eine neue Zeile in der Ausgabe und kann Ihren Code beschädigen.