如何在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中設置轉換原點

回答

相關問題