Как установить источник преобразования в SVG

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

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

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

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

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

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

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

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

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

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

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

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

И вот это в CSS:

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

похоже, мы все здесь упустили одну хитрость: transform-box: fill-box

использование transform-box: fill-boxзаставит элемент в SVG вести себя как обычный элемент HTML. Затем вы можете подать заявку transform-origin: center(или что-то еще), как обычно

все верно, transform-box: fill-boxникаких сложных матричных штучек

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