Как установить начало трансформации в SVG

Question

Мне нужно изменить размер и повернуть определенные элементы в документе SVG, используя JavaScript. Проблема в том, что по умолчанию всегда применяется преобразование вокруг начала координат в (0, 0) - вверху слева.

Как я могу переопределить эту точку привязки преобразования?

Я пытался использовать атрибут transform-origin, но он ни на что не влияет.

Вот как я это сделал:

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

Кажется, он не устанавливает опорную точку в точку, указанную мною, хотя в Firefox я вижу, что атрибут установлен правильно. Я пробовал такие вещи, как center bottom и 50% 100% с круглыми скобками и без них. Пока ничего не получалось.

Может кто-нибудь помочь?

Answer 1

Для поворота используйте transform="rotate(deg, cx, cy)", где deg - это степень, которую вы хотите повернуть, и (cx, cy) задайте центр вращения.

Для масштабирования / изменения размера вы должны перевести с помощью (-cx, -cy), затем масштабировать и затем перевести обратно на (cx, cy). Вы можете сделать это с помощью матричного преобразования :

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

Где sx - коэффициент масштабирования по оси x, sy по оси y.

Answer 2

Если вы можете использовать фиксированное значение (не «центр» или «50%»), вместо этого вы можете использовать CSS:

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

Некоторые браузеры (например, Firefox) не могут корректно обрабатывать относительные значения.

Answer 3

Если вы похожи на меня и хотите панорамировать и затем изменять масштаб с помощью transform-origin, вам понадобится немного больше.

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

Вот оно работает: http://forresto.github.io/dataflow-prototyping/react/

Answer 4

Для масштабирования без использования преобразования matrix:

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

И вот оно в CSS:

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

Answer 5

У меня была похожая проблема.Но я использовал D3 для позиционирования своих элементов и хотел, чтобы CSS * обрабатывали transform и transition .Это был мой оригинальный код, который я получил в 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) ...

Это позволило мне установить значения cx, cy и transform-origin в javascript, используя те же данные.

НО это не сработало в Firefox! Мне нужно было обернуть circle в тег g и translate, используя ту же формулу позиционирования сверху,Затем я добавил circle в тег g и установил для cx и cy значения 0.Оттуда transform: scale(2) будет масштабироваться от центра, как и ожидалось.Окончательный код выглядел следующим образом.

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

После внесения этого изменения я изменил свой CSS, чтобы нацелиться на circle вместо .dot, чтобы добавить transform: scale(2).Мне даже не нужно было использовать transform-origin.

ПРИМЕЧАНИЯ:

1. Я использую d3-selection-multi во втором примере.Это позволяет мне передавать объект в .attrs вместо повторения .attr для каждого атрибута.

2. При использовании строкового литерала шаблона учитывайте разрывы строк, как показано в первом примере.Это будет включать новую строку в вывод и может нарушить ваш код.