SVG、要素を基準にtransform。

プロパティ発見。

こんにちは、「ふ」です。
SVG要素のtransform-origin（変形の基準点）を指定するには、これまで散々な苦労をしてきました。

例えば⬆︎のオブジェクトをその場で回転させようとしたとき。

#element { animation:rotate_1 3s linear infinite; } @keyframes rotate_1 ｛ to { bbtransform:rotate(1turn); } ｝

オブジェクトはその場では回転してくれません。

SVGのtransformは、その対象が「viewBoxの持つ座標空間」にあるからです。基準点は原点にあり、多くの場合その場所は画像左上になっています。 座標空間が変形した結果、それにともなってオブジェクトも、変形するという順序です。
個別のオブジェクトを思い通りの位置で変形させるには、座標値を検出し、viewBoxに対する割合を算出....などと、とても苦労していました。

しかし今回、これまでの苦労を無駄に（笑）するかのようなCSSプロパティを発見してしまいました。
transformの対象をオブジェクトそのものに指定し、通常のHTML要素のように直感的にtransformさせる方法を紹介します。

transform-box。

それが、transform-boxというCSSプロパティ。

#element { transform-box:fill-box; }

値を「fill-box」に指定すると、transformの対象がオブジェクトのバウンディングボックスに切り替わります。

バウンディングボックス？

バウンディングボックスとは、オブジェクトを囲むことのできる最小の長方形のことです。
バウンディングボックスを対象にすれば、「オブジェクトそのもの」が対象になっているのと変わりありません。

originはあくまで原点。

fill-boxを指定した場合でも、初期状態のtransform-originはあくまで座標上の原点に位置しています。

ふつーのHTML要素では、transform-originの初期値は水平垂直方向ともにcenterですよね。

でも心配ありません。
fill-box指定後は対象がバウンディングボックスとなっているため、transform-originで指定した基準点は要素を対象に移動します。

各関数の動き。

transform-box:fill-boxを指定することにより、各transform関数の挙動はどのようになるのか。

２つの要素（id：elm1、elm2）を用意しました。
主な4つのtransform関数で試してみます。

rotate。

先づはtransform-boxを指定していない、デフォルトの状態でオブジェクトを回転させてみます。

#elm1 { animation:elm1 2s linear infinite; } @keyframes elm1 ｛ bbto { bbtransform:rotate(1turn); bb} ｝

viewBoxの座標空間の原点が基準となるため、画面の外に出て行ってしまいます💧

fill-boxを指定した状態で回転させてみましょう。

#elm1 { 「「１transform-box:fill-box;」」 animation:elm1 2s linear infinite; }

オブジェクトを基準に回転しています。
さらにtransform-originをオブジェクトの中心に持っていきます。

#elm1 { transform-box:fill-box; 「「１transform-origin:center;」」 animation:elm1 2s linear infinite; }

transform-originの指定も、オブジェクトを基準に指定することができました。
これは便利すぎる。

scale。

次は拡大縮小。
またフツーの状態から試してみます。

@keyframes elm1 ｛ bbto { bbtransform:scale(2); bb} ｝

原点を基準点としてviewBoxの座標空間全体が拡大されるため、他のオブジェクトとの位置関係も変わってしまいます。

こちら⬆︎がfill-boxを指定したもの（transform-originはデフォルトのままです）。
オブジェクトはその場で拡大しました。他のオブジェクトとの位置関係も保たれたままです。

skew。

@keyframes elm1 ｛ bbto { bbtransform:skew(40deg,40deg); bb} ｝

指定なしの状態⬆︎。
これもscaleのときと同じく、要素が移動してしまっています。

fill-boxとorigin:centerを指定しました。
その場で変形するようになりました。

translate。

translate(移動)で変わってくるのは、%指定における「100%」の対象です。

@keyframes elm1 ｛ bbto { bbtransform:translateY(50%); bb} ｝

これ⬆︎がデフォルトの状態。
transformの対象がviewBoxとなっているため、「50%」と指定すると「viewBoxの50%」と解釈されます。
「オブジェクトの0.5個ぶん、移動させたい」などのケースでは、デフォルトのままだとなかなか苦労します。

fill-boxを指定したものです。
「50%」は、「オブジェクトのバウンディングボックスの50%」として扱われるようになりました。

グループにも使える。

そしてtransform-box：fill-boxは、グループ化したオブジェクトにも適用できます。
２つの長方形「#elm1」「#elm2」をグループ化。id名を「hutatu」としました。

「「１<g id = "hutatu">」」 bb<rect id = "elm1" ....> bb<rect id = "elm2" ....> 「「１</g>」」

グループに対しfill-boxを指定し、アニメーションさせてみます。

#hutatu { 「「１transform-box:fill-box;」」 transform-origin:center; animation:hutatu 3s linear infinite; } @keyframes hutatu ｛ bbto { bbtransform:rotate(1turn); bb} bb｝

SVGアニメーションの幅が広がりそうですね！

最後までお読みくださり、ありがとうございました。
SVGの要素に対して、「transformの基準点を効率よく指定する」方法については、「ふ」もこれまで散々悩んできました。しかしtransform-boxという便利なプロパティを発見したことにより、革命的な進歩を得た気分です。

もちろん、SVGならではの座標値からポイントを指定する方法もあります（⬇︎の関連記事欄に貼ってあります）。変則的な場所にtransform-originを取りたい場合にはこちらのほうが有効です。

fill-boxを使うやり方/座標値から指定するやり方。
両方を合わせて知識として持っておくと、無敵です。 ではまた〜 ♪