SVGで変換元を設定する方法

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

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

transform-origin属性を使用してみましたが、何の影響もありません。

これは私がそれをした方法です：

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

属性が正しく設定されていることをFirefoxで確認できますが、ピボットポイントを指定したポイントに設定していないようです。私はのようなものを試してみましたcenter bottomし、50% 100%とし、括弧なし。これまで何も機能しませんでした。

誰か助けてもらえますか？

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

スケーリング/サイズ変更の場合は、（-cx、-cy）で変換してから、スケーリングしてから（cx、cy）に変換する必要があります。これは、行列変換を使用して行うことができます。

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

ここで、sxはx軸のスケーリング係数、y軸はsyです。

固定値（「center」や「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/

matrix変換を使用せずにスケーリングするには：

transform="translate(cx, cy) scale(sx sy) translate(-cx, -cy)"

そして、それはCSSにあります：

transform: translate(cxpx, cypx) scale(sx, sy) translate(-cxpx, -cypx)

ここで私たちはすべてトリックを逃したようです： transform-box: fill-box

を使用transform-box: fill-boxすると、SVG内の要素が通常のHTML要素として動作します。次にtransform-origin: center、通常どおりに適用できます（または他の何か）。

そうtransform-box: fill-boxです、複雑なマトリックスの必要はありません

同様の問題がありました。しかし、私は要素を配置するためにD3を使用していて、変換と遷移をCSSで処理したいと考えていました。これは私の元のコードで、Chrome 65で動作しました。

//...
this.layerGroups.selectAll('.dot')
  .data(data)
  .enter()
  .append('circle')
  .attr('transform-origin', (d,i)=> `${valueScale(d.value) * Math.sin( sliceSize * i)} 
                                     ${valueScale(d.value) * Math.cos( sliceSize * i + Math.PI)}`)
//... etc (set the cx, cy and r below) ...

これは私が設定することができcx、cyおよびtransform-origin同じデータを使用してJavaScriptで値を。

しかし、これはFirefoxでは機能しませんでした！私がしなければならなかったことはcircle、gタグとtranslateその上にあるのと同じ配置式を使用してタグをラップすることでした。次にcircle、gタグにを追加し、cxとのcy値をに設定しました0。そこtransform: scale(2)から、期待どおりに中心からスケーリングします。最終的なコードは次のようになります。

this.layerGroups.selectAll('.dot')
  .data(data)
  .enter()
  .append('g')
  .attrs({
    class: d => `dot ${d.metric}`,
    transform: (d,i) => `translate(${valueScale(d.value) * Math.sin( sliceSize * i)} ${valueScale(d.value) * Math.cos( sliceSize * i + Math.PI)})`
  })
  .append('circle')
  .attrs({
    r: this.opts.dotRadius,
    cx: 0,
    cy: 0,
  })

この変更を行った後、を追加するためにのcircle代わりにをターゲットにするようにCSSを変更しまし.dotたtransform: scale(2)。私も使用する必要はありませんでしたtransform-origin。

ノート：

1. d3-selection-multi2番目の例で使用しています。これにより、属性ごと.attrsに繰り返す代わりに、オブジェクトをに渡すことができ.attrます。

2. 文字列テンプレートリテラルを使用する場合は、最初の例に示すように改行に注意してください。これにより、出力に改行が含まれ、コードが壊れる可能性があります。