如何在SVG中设置转换原点

我需要调整和旋转使用JavaScript的SVG文档中的某些元素。 问题是,默认情况下,它始终应用围绕原点(0, 0) – 左上angular的变换。

我怎样才能重新定义这个变换锚点?

我尝试使用transform-origin属性,但不影响任何内容。

这是我做到的:

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

虽然我可以在Firefox中看到该属性是正确设置的,但似乎没有将关键点设置为我指定的点。 我尝试了中center bottom50% 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/