【SVG】preserveAspectRatio　画像の配置の制御

SVGには preserveAspectRatio という属性があり、画像を「どの位置」に「どのように」配置するかを決めることができます。

viewBoxとビューポートについては前回の記事をご覧ください。

今回はこの属性 preserveAspectRatio について解説していきたいと思います。

ちなみに参考図書は「Webで使える!SVGファーストガイド」です。

今回はこのような　

ビューポートは(0,0)から始まり幅200、高さ100の長方形、

viewBoxは(0,0)から始まり幅200、高さ200の正方形

という比率の合わない変換を考えてみたいと思います。

See the Pen circle3 by inu (@tenp) on CodePen.

以上実際にコードを書いて描いたものですが、少し説明をします。

preserveAspectRatio には指定できる値が２種類あります。

図を配置する位置の指定

　xMinYMin　xMidYMin xMaxYMin

　xMinYMid　xMidYMid xMaxYMid

　xMinYMax　xMidYMax xMaxYMax

どのように配置するか

　meet　…　viewBoxで切り取った画像をビューポートに全体表示できるよう拡大縮小する

　slice　…　 viewBoxで切り取った画像 がビューポートに入らなければ切り取られる

　none　…　viewBoxで切り取った画像をビューポートぴったりに合わせる

上の図に沿って説明すると、

1番目、何も設定しない場合ですが、デフォルト設定が4番目と同じpreserveAspectRatio=”xMidYMid meet” になっています。

meetなのでビューポートに全体が入るようサイズを縮小し、viewBoxとビューポートのｘ、ｙ座標それぞれの中間の位置に図が表示されます。

3番目の preserveAspectRatio=”xMidYMid slice” は

ｘ、ｙ座標それぞれの中間の位置に画像を表示し、sliceなのでビューポートに入らない分はカットされています。

5番目の preserveAspectRatio=”xMinYMid meet” は

meetなので画像縮小、viewBoxとビューポートの最小のｘ座標と、中間のｙ座標に画像の端が合わさるように表示されています。

6番目の preserveAspectRatio=”xMaxYMid meet” は

meetなので画像縮小、viewBoxとビューポートの最大のｘ座標と、中間のｙ座標に画像の端が合わさるように表示されています。

7、8番目はxMidYMin meet　xMidYMax meet　なんですが、高さにはもう空きがないので、ｙ座標が最小か最大の端に合わせるかに関わらず表示は変わりません。

最後　xMidYMax slice　ですが、

viewBoxとビューポートの最大のy座標、x座標の中間の位置に画像の端を合わせ、sliceなのでビューポートに入らない分はカットされています。

このように結構細かい指定ができるので、この機能を効果的に使うことで、画面外にはみ出しているようなダイナミックなデザインが出来たりするかもしれないですね。