SVGの整列について

Question

現在、SVGで整列の処理を作成しているのですが、
以下図のように回転させると、灰色の部分で整列してしまうのですが、
矩形(青紫の箇所)で整列することは可能でしょうか？

jsでこういった処理を可能にするメソッドがあれば教えていただきたいです。
なければ計算式でもいいので教えて下さい。

よろしくお願いしいます。

ご指摘いただきましたので、サンプルコード追加します。

<!-- 星の形45° -->
<g transform="matrix(2.82843 2.82843 -2.82843 2.82843 675.59 109.905)">
    <path d="M50.00,0 L35.30,35.30 L0,39.70 L26.50,64.70 L20.60,100.00 L50.00,85.30 L79.40,100.00 L73.50,64.70 L100.00,39.70 L64.70,35.30 L50.00,0 z" />
    <rect width="100" vector-effect="non-scaling-stroke" stroke-width="0.5" stroke="#000" height="100" fill="none" />
</g>

var svgMatrix = element.createSVGMatrix();
Matrix.f = [揃えたい座標];

jsおよびSVGに疎いもので、足りているかわかりませんがよろしくお願いします

Comments

[manabufukai]

SVGは
・スタンドアロンorインライン
・svgタグの中に複数の図形要素を含んでいるor一つの図形につき一つのsvg要素
・回転はtransform属性なのかcssプロバティなのか
等の条件により、振る舞いが大きく変わります。
コード等も可能な限り開示していただいたほうが正確な回答が得られると思います。

[退会済みユーザー]

ご指摘ありがとうございます。
コードの追加いたしました。よろしくお願いします

Answer 1

お見受けする限り

<svg>
  <g>...</g>
  <g transform="...">...</g>
  ・
  ・
</svg>

という「svg要素下に複数のg要素がある」構造になるのですね？

ここでポイントなのが

1. svg要素にviewBoxの指定が無ければ、暗黙的にsvg要素のwidth,heightがviewBoxに指定される
2. viewBoxは読んで時の如く「表示領域」＝ここをはみ出した範囲は可視できなくなる
3. transform属性での指定の際、Matrixでは変形の中心を指定できない（rotateでの変形なら指定可）
4. ただし、rotateで回転を中心点に指定しても2.の理由から上へはみ出した分は欠ける
5. じゃあsvg要素にpadding指定すれば => 現状ブラウザの解釈の違いアリ（不安定）

また、matrixにscale,skewX,skewYの指定も入っていますが、これもg要素毎に違うと考えるべきですよね？
となるとcreateSVGMatrix()でmatrixの指定を取得しても、skewで歪ませた分の位置を計算するのはちょっと面倒かなと思います。なので、ちょっと泥臭いですが、各要素の位置とサイズを取得して平均を出すという方法で

  <svg id="svg"><!-- idを付与 -->
    <g class="path"><!-- classを付与 -->
      <path d="M50.00,0 L35.30,35.30 L0,39.70 L26.50,64.70 L20.60,100.00 L50.00,85.30 L79.40,100.00 L73.50,64.70 L100.00,39.70 L64.70,35.30 L50.00,0 z" />
      <rect width="100" vector-effect="non-scaling-stroke" stroke-width="0.5" stroke="#000" height="100" fill="none" />
    </g>
    <g class="path" transform="matrix(2.82843 2.82843 -2.82843 2.82843 675.59 109.905)"><!-- classを付与 -->
      <path d="M50.00,0 L35.30,35.30 L0,39.70 L26.50,64.70 L20.60,100.00 L50.00,85.30 L79.40,100.00 L73.50,64.70 L100.00,39.70 L64.70,35.30 L50.00,0 z" />
      <rect width="100" vector-effect="non-scaling-stroke" stroke-width="0.5" stroke="#000" height="100" fill="none" />
    </g>
  </svg>

<script>
function getPos(el){
  var rect = el.getBoundingClientRect();
  return rect;
}

var element = document.getElementById('svg')
var childs = element.getElementsByTagName('g');
var childsLg = childs.length;
var pos = [];

for( var i=0; i<childsLg; i++ ){
    //各g要素の位置とサイズを配列へ格納
    pos[i] = getPos(childs[i]);
}
//1.ここで返ってきたx座標、y座標、width,heightを元に縦軸の平均値を計算
//2.1の値を元に全g要素に対してMatrixのtranslateを再設定
//IE対応も考えて、親のsvg要素へwidth,height再指定（※必要であれば。IEではwidth,heightを指定していなければ、ブラウザデフォルトで設定されてるサイズに固定される）
</script>

といった方法になるのかな…と。

もっと簡単にしたい場合

Matrixで指定することに拘らず、図形を１つのsvg要素内でまとめることに拘らないなら

<svg class="foo">
  <g>...</g>
</svg>
<svg class="bar">
  <g transform="...">...</g>
</svg>

のようにして、cssでtransformを行えばtransform-originの指定なども効くので簡単かなと思います。

Comments

[退会済みユーザー]

ご回答頂きありがとうございます。
教えていただいた方法をやってみたいと思います。

>Matrixで指定することに拘らず
こちらも、考えながらやっていきたいと思います。

わかりやすい回答本当にありがとうございました。