SVGで変換元を設定するには

Question

javascriptを使用してSVGドキュメントの特定の要素のサイズを変更して回転する必要があります。問題は、デフォルトでは、原点周りの変換を常に左上の(0, 0)に適用することです。

この変換アンカーポイントを再定義するにはどうすればよいですか？

transform-origin属性を使用しようとしましたが、何も影響しません。

これは、私はそれをやった方法です：

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

私が属性が正しく設定されていることをFirefoxで見ることができますが、私は指定されたポイントに極めて重要なポイントを設定していないようです。私はcenter bottomと50% 100%のように、かっこを付けてみました。これまでに何もできませんでした。

誰でも手助けできますか？

Answer 1

transform="rotate(deg, cx, cy)"を使用して回転するには、degは回転させたい度合いで、（cx、cy）は回転の中心を定義します。

スケーリング/サイズ変更の場合は、（-cx、-cy）で変換し、次に縮尺してから（cx、cy）に戻す必要があります。あなたはmatrix transformでこれを行うことができます：

SXは、x軸の伸縮率、y軸でSYある

transform="matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)" 

。

Answer 2

私が好きで、パンをしてから変換元をズームしたい場合は、もう少し必要です。

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

Answer 3

あなたは固定値（ない "中央" または "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など）は相対値を正しく処理しません。