如何在SVG中设置变换原点

我需要使用JavaScript调整SVG文档中的某些元素的大小并旋转它们。问题是，默认情况下，它始终围绕(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）无法正确处理相对值。

如果您像我一样，并且想要平移然后使用转换原点进行缩放，则需要更多。

// <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. 使用字符串模板文字时，请注意第一个示例中的换行符。这将在输出中包含换行符，并且可能会破坏您的代码。