如何在SVG中设置转换原点
我需要调整和旋转使用JavaScript的SVG文档中的某些元素。 问题是，默认情况下，它始终应用围绕原点(0, 0) – 左上angular的变换。
我怎样才能重新定义这个变换锚点？
我尝试使用transform-origin属性，但不影响任何内容。
这是我做到的：
svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');
虽然我可以在Firefox中看到该属性是正确设置的，但似乎没有将关键点设置为我指定的点。 我尝试了中center bottom和50% 100% ，不加括号。 到目前为止没有工作。
谁能帮忙？
旋转使用transform="rotate(deg, cx, cy)" ，其中deg是要旋转的angular度，（cx，cy）定义旋转中心。
对于缩放/resize，您必须翻译（-cx，-cy），然后缩放然后再翻译回（cx，cy）。 你可以用一个matrix变换来做到这一点：
transform="matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)"
其中sx是x轴的缩放因子，y轴是sy。
如果您可以使用固定值（不是“中心”或“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/
