Cara menyetel asal transformasi di SVG

Saya perlu mengubah ukuran dan memutar elemen tertentu dalam dokumen SVG menggunakan javascript. Masalahnya adalah, secara default, itu selalu menerapkan transformasi di sekitar asal di (0, 0)- kiri atas.

Bagaimana saya bisa mendefinisikan ulang titik jangkar transformasi ini?

Saya mencoba menggunakan transform-originatribut, tetapi tidak mempengaruhi apa pun.

Beginilah cara saya melakukannya:

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

Tampaknya tidak menetapkan titik penting ke titik yang saya tentukan meskipun saya dapat melihat di Firefox bahwa atributnya disetel dengan benar. Saya mencoba hal-hal seperti center bottomdan 50% 100%dengan dan tanpa tanda kurung. Sejauh ini tidak ada yang berhasil.

Adakah yang bisa membantu?

Untuk memutar gunakan transform="rotate(deg, cx, cy)", di mana deg adalah derajat yang ingin Anda putar dan (cx, cy) tentukan pusat rotasi.

Untuk penskalaan / pengubahan ukuran, Anda harus menerjemahkan dengan (-cx, -cy), lalu menskalakan dan kemudian menerjemahkan kembali ke (cx, cy). Anda dapat melakukan ini dengan transformasi matriks :

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

Di mana sx adalah faktor skala di sumbu x, sy di sumbu y.

Jika Anda dapat menggunakan nilai tetap (bukan "center" atau "50%"), Anda dapat menggunakan CSS sebagai gantinya:

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

Beberapa browser (seperti Firefox) tidak akan menangani nilai relatif dengan benar.

Jika Anda seperti saya dan ingin menggeser lalu memperbesar dengan transformasi asal, Anda memerlukan lebih banyak.

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

Ini dia bekerja: http://forresto.github.io/dataflow-prototyping/react/

Untuk penskalaan tanpa harus menggunakan matrixtransformasi:

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

Dan ini dia di CSS:

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

sepertinya kita semua melewatkan satu trik di sini: transform-box: fill-box

menggunakan transform-box: fill-boxakan membuat elemen dalam SVG berperilaku sebagai elemen HTML biasa. Kemudian Anda dapat melamar transform-origin: center(atau yang lain) seperti biasa

itu benar, transform-box: fill-boxtidak perlu barang matriks yang rumit

Saya memiliki masalah serupa. Tapi saya menggunakan D3 untuk memposisikan elemen saya, dan ingin transformasi dan transisi ditangani oleh CSS. Ini adalah kode asli saya, yang saya kerjakan di 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) ...

Hal ini memungkinkan saya untuk mengatur cx, cydan transform-originnilai-nilai dalam javascript menggunakan data yang sama.

TAPI ini tidak berhasil di Firefox! Apa yang harus saya lakukan adalah membungkus circledi gtag dan translatemenggunakan rumus posisi yang sama dari atas. Saya kemudian menambahkan circledi gtag, dan mengatur cxdan cynilainya ke 0. Dari sana, transform: scale(2)akan skala dari pusat seperti yang diharapkan. Kode terakhir terlihat seperti ini.

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

Setelah melakukan perubahan ini, saya mengubah CSS saya untuk menargetkan circlealih - alih .dot, untuk menambahkan transform: scale(2). Saya bahkan tidak perlu menggunakan transform-origin.

CATATAN:

1. Saya menggunakan d3-selection-multicontoh kedua. Hal ini memungkinkan saya untuk meneruskan objek .attrsdaripada mengulang .attruntuk setiap atribut.

2. Saat menggunakan literal template string, perhatikan baris baru seperti yang diilustrasikan dalam contoh pertama. Ini akan menyertakan baris baru dalam output dan dapat merusak kode Anda.