我需要使用 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)。您可以使用 matrix transform 执行此操作：
transform="matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)"
其中 sx 是 x 轴的比例因子，sy 是 y 轴的比例因子。
svg * {
transform-box: fill-box;
}
应用 transform-box: fill-box 将使 SVG 中的元素表现得像普通的 HTML 元素。然后你可以像往常一样应用 transform-origin: center （或其他东西）
没错，transform-box: fill-box。这些天来，不需要任何复杂的矩阵东西
transform-box: fill-box;，你可以让 svg elementes 以一种理智的方式尊重 transform-origin/就像你期望的那样！
如果您可以使用固定值（不是“中心”或“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）不能正确处理相对值。
element.setAttribute('transform-origin', '25px 25px') ？
如果您像我一样想要平移然后使用变换原点进行缩放，则需要更多。
// <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/
getElementById 和文档的 id="..." 属性中的 id 匹配。不看代码很难确定。如果您不想将其作为 SO 问题发布，您可以尝试使用属性名称创建最简单的示例，直到它起作用/您找到问题，然后将其余部分重新添加。
对于无需使用 matrix 转换的缩放：
transform="translate(cx, cy) scale(sx sy) translate(-cx, -cy)"
它在 CSS 中：
transform: translate(cxpx, cypx) scale(sx, sy) translate(-cxpx, -cypx)
您可以在 0,0 原点附近构建任何您想要的东西，然后将其放入组 <g></g> 并矩阵转换整个组。像这样，对象将始终围绕 0,0 旋转，但整个组被移动（平移）到其他地方，并且在旋转后应用平移矩阵。