![動点Qちゃん](https://tenp-kukan.com/wp-content/uploads/2021/12/q01.png)
今回は前回のビューポートとviewBoxの続きで、この二つの比率が違うときの画像の配置について解説します・・・
![動点P](https://tenp-kukan.com/wp-content/uploads/2021/12/p01-1.png)
かなり細かく制御できるんだよね
SVGには preserveAspectRatio という属性があり、画像を「どの位置」に「どのように」配置するかを決めることができます。
viewBoxとビューポートについては前回の記事をご覧ください。
今回はこの属性 preserveAspectRatio について解説していきたいと思います。
ちなみに参考図書は「Webで使える!SVGファーストガイド」です。
![](https://tenp-kukan.com/wp-content/uploads/2021/12/11-1.gif)
今回はこのような
ビューポートは(0,0)から始まり幅200、高さ100の長方形、
viewBoxは(0,0)から始まり幅200、高さ200の正方形
という比率の合わない変換を考えてみたいと思います。
See the Pen circle3 by inu (@tenp) on CodePen.
以上実際にコードを書いて描いたものですが、少し説明をします。
preserveAspectRatio には指定できる値が2種類あります。
図を配置する位置の指定
xMinYMin xMidYMin xMaxYMin
xMinYMid xMidYMid xMaxYMid
xMinYMax xMidYMax xMaxYMax
どのように配置するか
meet … viewBoxで切り取った画像をビューポートに全体表示できるよう拡大縮小する
slice … viewBoxで切り取った画像 がビューポートに入らなければ切り取られる
none … viewBoxで切り取った画像をビューポートぴったりに合わせる
![](https://tenp-kukan.com/wp-content/uploads/2021/12/11-2.gif)
上の図に沿って説明すると、
1番目、何も設定しない場合ですが、デフォルト設定が4番目と同じpreserveAspectRatio=”xMidYMid meet” になっています。
meetなのでビューポートに全体が入るようサイズを縮小し、viewBoxとビューポートのx、y座標それぞれの中間の位置に図が表示されます。
![](https://tenp-kukan.com/wp-content/uploads/2021/12/11-3-650x1024.gif)
3番目の preserveAspectRatio=”xMidYMid slice” は
x、y座標それぞれの中間の位置に画像を表示し、sliceなのでビューポートに入らない分はカットされています。
5番目の preserveAspectRatio=”xMinYMid meet” は
meetなので画像縮小、viewBoxとビューポートの最小のx座標と、中間のy座標に画像の端が合わさるように表示されています。
![](https://tenp-kukan.com/wp-content/uploads/2021/12/11-4-650x1024.gif)
6番目の preserveAspectRatio=”xMaxYMid meet” は
meetなので画像縮小、viewBoxとビューポートの最大のx座標と、中間のy座標に画像の端が合わさるように表示されています。
7、8番目はxMidYMin meet xMidYMax meet なんですが、高さにはもう空きがないので、y座標が最小か最大の端に合わせるかに関わらず表示は変わりません。
最後 xMidYMax slice ですが、
viewBoxとビューポートの最大のy座標、x座標の中間の位置に画像の端を合わせ、sliceなのでビューポートに入らない分はカットされています。
![](https://tenp-kukan.com/wp-content/uploads/2021/12/11-5.gif)
このように結構細かい指定ができるので、この機能を効果的に使うことで、画面外にはみ出しているようなダイナミックなデザインが出来たりするかもしれないですね。
コメント