Cách đặt điểm gốc biến đổi trong SVG

Tôi cần thay đổi kích thước và xoay các phần tử nhất định trong tài liệu SVG bằng javascript. Vấn đề là, theo mặc định, nó luôn áp dụng phép biến đổi xung quanh điểm gốc ở (0, 0)- trên cùng bên trái.

Làm cách nào để xác định lại điểm neo chuyển đổi này?

Tôi đã thử sử dụng transform-originthuộc tính, nhưng nó không ảnh hưởng gì cả.

Đây là cách tôi đã làm điều đó:

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

Có vẻ như không đặt điểm mấu chốt thành điểm tôi đã chỉ định mặc dù tôi có thể thấy trong Firefox rằng thuộc tính được đặt chính xác. Tôi đã thử những thứ như center bottomvà 50% 100%có và không có dấu ngoặc đơn. Không có gì hoạt động cho đến nay.

Có ai giúp được không?

Để xoay sử dụng transform="rotate(deg, cx, cy)", trong đó deg là độ bạn muốn xoay và (cx, cy) xác định tâm quay.

Để chia tỷ lệ / thay đổi kích thước, bạn phải dịch theo (-cx, -cy), sau đó chia tỷ lệ và sau đó dịch ngược lại thành (cx, cy). Bạn có thể làm điều này với một phép biến đổi ma trận :

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

Trong đó sx là hệ số tỷ lệ trong trục x, sy trong trục y.

Nếu bạn có thể sử dụng một giá trị cố định (không phải "center" hoặc "50%"), bạn có thể sử dụng CSS để thay thế:

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

Một số trình duyệt (như Firefox) sẽ không xử lý các giá trị tương đối một cách chính xác.

Nếu bạn giống tôi và muốn xoay và sau đó thu phóng với điểm gốc biến đổi, bạn sẽ cần nhiều hơn một chút.

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

Ở đây nó đang hoạt động: http://forresto.github.io/dataflow-prototyping/react/

Để mở rộng quy mô mà không cần phải sử dụng matrixphép biến đổi:

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

Và đây là trong CSS:

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

Có vẻ như tất cả chúng ta đã bỏ lỡ một mẹo ở đây: transform-box: fill-box

việc sử dụng transform-box: fill-boxsẽ làm cho một phần tử trong SVG hoạt động như một phần tử HTML bình thường. Sau đó, bạn có thể áp dụng transform-origin: center(hoặc một cái gì đó khác) như bình thường

đúng vậy, transform-box: fill-boxkhông cần bất kỳ thứ ma trận phức tạp nào

Tôi đã có một vấn đề tương tự. Nhưng tôi đã sử dụng D3 vị trí các yếu tố của tôi, và muốn chuyển đổi và chuyển tiếp để được xử lý bởi CSS. Đây là mã gốc của tôi, mà tôi đã làm việc trong 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) ...

Điều này cho phép tôi để thiết lập cx, cyvà transform-origincác giá trị trong javascript sử dụng cùng dữ liệu.

NHƯNG điều này không hoạt động trong Firefox! Những gì tôi phải làm là bọc thẻ circletrong gthẻ và translatenó sử dụng cùng một công thức định vị từ phía trên. Sau đó, tôi đã thêm thẻ circlevào gthẻ và đặt cxvà cycác giá trị của nó thành 0. Từ đó, transform: scale(2)sẽ mở rộng quy mô từ trung tâm như mong đợi. Mã cuối cùng trông như thế này.

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

Sau khi thực hiện thay đổi này, tôi đã thay đổi CSS của mình để nhắm mục tiêu circlethay vì .dot, để thêm transform: scale(2). Tôi thậm chí không cần sử dụng transform-origin.

LƯU Ý:

1. Tôi đang sử dụng d3-selection-multitrong ví dụ thứ hai. Điều này cho phép tôi chuyển một đối tượng đến .attrsthay vì lặp lại .attrcho mọi thuộc tính.

2. Khi sử dụng theo nghĩa đen của mẫu chuỗi, hãy lưu ý các dấu ngắt dòng như được minh họa trong ví dụ đầu tiên. Điều này sẽ bao gồm một dòng mới trong đầu ra và có thể phá vỡ mã của bạn.