如何在 SVG 中设置变换原点

旋转使用 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 轴的比例因子，y 轴是 sy。

如果您像我一样，想要使用变换原点进行平移和缩放，则需要更多一些。

// <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/

如果你可以使用一个固定的值(不是“居中”或“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)不能正确处理相对值。

我也有过类似的问题。但是我使用 D3来定位我的元素，并且希望使用 CSS 来处理 变形和 过渡期。这是我的原始代码，我在 Chrome65中得到的:

//...
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) ...

这允许我使用相同的数据在 javascript 中设置 cx、 cy和 transform-origin值。

但是这在 Firefox 中不起作用！我所要做的就是将 circle包裹在 g标签中，然后使用上面相同的定位公式将 translate包裹起来。然后，我在 g标记中附加了 circle，并将它的 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,
})