it-roy-ru.com

Как установить трансформирование Origin в SVG

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

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

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

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

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

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

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

78
Charlemagne

Для поворота используйте 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.

125
Peter Collingridge

Если вы можете использовать фиксированное значение (не «центр» или «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) не будут правильно обрабатывать относительные значения.

18
Hafenkranich

Если вы похожи на меня и хотите панорамировать, а затем увеличить с помощью 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/

11
forresto

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

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

И вот это в CSS:

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

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

0
Jamie S