如何在SVG中设置转换原点

我需要使用javascript调整SVG文档中的某些元素的大小并旋转它。问题是，默认情况下，它始终应用围绕原点的变换，即(0, 0) - 左上角。如何在SVG中设置转换原点

如何重新定义此变换锚点？

我试过使用transform-origin属性，但它不影响任何东西。

这是我做的：

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

它似乎并没有设置关键点我指定的，虽然我可以在Firefox中看到该属性设置正确的点。我尝试了诸如center bottom和50% 100%之类的内容，但没有括号。目前为止没有任何工作

任何人都可以帮忙吗？

来源

2011-07-15 Charlemagne

FWIW，据说固定为Firefox 19 beta 3，尽管我仍然在Firefox 22中遇到问题。Mozilla bugzilla列表：https：//bugzilla.mozilla.org/show_bug.cgi？id = 828286 – Toph

108

要旋转使用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轴。

来源

2011-07-15 23:16:58

谢谢你许多。旋转完美，我认为，但缩放/调整大小最终总是以一些随机数量结束。我尝试使用矩阵，并像“translate（cx * sx，cy * sy）scale（sx，sy）”一样分别进行。结果相同。 – Charlemagne

它不是transform =“matrix（sx，0，0，sy，cx-sx * cx，cy-sy * cy）”吗？因为你只想通过差异来翻译。我认为这个逻辑是正确的，但它仍然给我的立场... – Charlemagne

现在它的工作！我只是使用错误的cx和cy值！非常感谢！ – Charlemagne

如果你像我一样，想要平移，然后用变换原点缩放，则需要多一点。

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

来源

2014-01-08 12:47:33 forresto

你的github链接404s – NuclearPeon

@NuclearPeon谢谢，修正。 – forresto

如果你可以使用一个固定值（不是 “中心” 或 “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）不会正确处理相对值。

来源

2015-09-01 17:53:48 Hafenkranich

哇。如果可以的话，会+10。这节省了我的一天！谢谢。 – Cullub

如何在SVG中设置转换原点

回答

相关问题