preserveAspectRatio
preserveAspectRatio
属性は、指定されたアスペクト比を提供するビューボックスを持つ要素が、異なるアスペクト比を持つビューポートにどのように収まるべきかを示します。
SVG 画像のアスペクト比は viewBox
属性によって定義されるので、この属性が設定されていない場合、 preserveAspectRatio
属性は何の効果も持ちません(後述する <image>
要素は例外です)。
例
meet (width > height)
この例では、要素の width
が height
よりも大きい場合に meet
を使用することを示しています。 3 つの配置値 xMidYMid
、xMinYMid
、xMaxYMid
で 3 つのバリエーションを表示します。
<svg viewBox="-1 -1 202 40" xmlns="http://www.w3.org/2000/svg">
<defs>
<path
id="smiley"
d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
</defs>
</svg>
<rect x="0" y="0" width="60" height="30">
<title>xMidYMid meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="60"
height="30"
preserveAspectRatio="xMidYMid meet"
x="0"
y="0">
<use href="#smiley" />
</svg>
<rect x="70" y="0" width="60" height="30">
<title>xMinYMid meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="60"
height="30"
preserveAspectRatio="xMinYMid meet"
x="70"
y="0">
<use href="#smiley" />
</svg>
<rect x="140" y="0" width="60" height="30">
<title>xMaxYMid meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="60"
height="30"
preserveAspectRatio="xMaxYMid meet"
x="140"
y="0">
<use href="#smiley" />
</svg>
</svg>
path {
fill: yellow;
stroke: black;
stroke-width: 8px;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
rect:hover,
rect:active {
outline: 1px solid red;
}
slice (width > height)
この例では、要素の width
が height
よりも大きい場合に slice
を使用することを示しています。 3 種類の配置値 xMidYMin
、xMidYMid
、xMidYMax
で 3 つのバリエーションを表示します。
<svg viewBox="-1 -1 202 57" xmlns="http://www.w3.org/2000/svg">
<defs>
<path
id="smiley"
d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
</defs>
</svg>
<rect x="0" y="15" width="60" height="30">
<title>xMidYMin slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="60"
height="30"
preserveAspectRatio="xMidYMin slice"
x="0"
y="15">
<use href="#smiley" />
</svg>
<rect x="70" y="15" width="60" height="30">
<title>xMidYMid slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="60"
height="30"
preserveAspectRatio="xMidYMid slice"
x="70"
y="15">
<use href="#smiley" />
</svg>
<rect x="140" y="15" width="60" height="30">
<title>xMidYMax slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="60"
height="30"
preserveAspectRatio="xMidYMax slice"
x="140"
y="15">
<use href="#smiley" />
</svg>
</svg>
path {
fill: yellow;
stroke: black;
stroke-width: 8px;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
rect:hover,
rect:active {
outline: 1px solid red;
}
meet (height > width)
この例では、要素の height
が width
よりも大きい場合に meet
を使用することを示しています。 3 種類の配置値 xMidYMin
、xMidYMid
、xMidYMax
で 3 つのバリエーションを表示します。
<svg viewBox="-1 -1 202 80" xmlns="http://www.w3.org/2000/svg">
<defs>
<path
id="smiley"
d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
</defs>
</svg>
<rect x=0" y="0" width="30" height="75">
<title>xMidYMin meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="30"
height="75"
preserveAspectRatio="xMidYMin meet"
x="0"
y="0">
<use href="#smiley" />
</svg>
<rect x="35" y="0" width="30" height="75">
<title>xMidYMid meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="30"
height="75"
preserveAspectRatio="xMidYMid meet"
x="35"
y="0">
<use href="#smiley" />
</svg>
<rect x="70" y="0" width="30" height="75">
<title>xMidYMax meet</title>
</rect>
<svg
viewBox="0 0 100 100"
width="30"
height="75"
preserveAspectRatio="xMidYMax meet"
x="70"
y="0">
<use href="#smiley" />
</svg>
</svg>
path {
fill: yellow;
stroke: black;
stroke-width: 8px;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
rect:hover,
rect:active {
outline: 1px solid red;
}
slice (height > width)
この例では、要素の height
が width
よりも大きい場合に slice
を使用することを示しています。 3 種類の配置値 xMinYMid
、xMidYMid
、xMaxYMid
で 3 つのバリエーションを表示します。
<svg viewBox="-1 -1 202 80" xmlns="http://www.w3.org/2000/svg">
<defs>
<path
id="smiley"
d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
</defs>
</svg>
<rect x="0" y="0" width="30" height="75">
<title>xMinYMid slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="30"
height="75"
preserveAspectRatio="xMinYMid slice"
x="0"
y="0">
<use href="#smiley" />
</svg>
<rect x="35" y="0" width="30" height="75">
<title>xMidYMid slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="30"
height="75"
preserveAspectRatio="xMidYMid slice"
x="35"
y="0">
<use href="#smiley" />
</svg>
<rect x="70" y="0" width="30" height="75">
<title>xMaxYMid slice</title>
</rect>
<svg
viewBox="0 0 100 100"
width="30"
height="75"
preserveAspectRatio="xMaxYMid slice"
x="70"
y="0">
<use href="#smiley" />
</svg>
</svg>
path {
fill: yellow;
stroke: black;
stroke-width: 8px;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
rect:hover,
rect:active {
outline: 1px solid red;
}
none
この例では配置値を none
に設定した要素を表示させています。
<svg viewBox="-1 -1 192 62" xmlns="http://www.w3.org/2000/svg">
<defs>
<path
id="smiley"
d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
</defs>
</svg>
<!-- none -->
<rect x="0" y="0" width="160" height="60">
<title>none</title>
</rect>
<svg
viewBox="0 0 100 100"
width="160"
height="60"
preserveAspectRatio="none"
x="0"
y="0">
<use href="#smiley" />
</svg>
</svg>
path {
fill: yellow;
stroke: black;
stroke-width: 8px;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
rect:hover,
rect:active {
outline: 1px solid red;
}
構文
preserveAspectRatio="<align> [<meetOrSlice>]"
その値は、 1 つまたは 2 つのキーワードで構成されます。必要な配置値と、下記で記述されているオプションの "meet または slice" の参照です。
- 配置値
-
配置値は、均等な変倍を強制するかどうかを示し、もしそうなら、
viewBox
の縦横比がビューポートの縦横比と一致しない場合に使用する配置方法を示します。配置値は以下のいずれかのキーワードでなければなりません。-
none
均等な変倍を強制しません。指定された要素のグラフィックコンテンツを、要素の外接ボックスがビューポートの長方形に正確に一致するように、必要に応じて不均一に変倍します。 もし
<align>
がnone
ならば、オプションの<meetOrSlice>
の値は無視されることに注意してください。 -
xMinYMin - 均等な変倍を強制します。
要素の
viewBox
の<min-x>
をビューポートの最小 X 値に配置します。 要素のviewBox
の<min-y>
をビューポートの最小 Y 値に配置します。 -
xMidYMin - 均等な変倍を強制します。
要素の
viewBox
の X の中央値をビューポートの X の中央値に配置します。 要素のviewBox
の<min-y>
をビューポートの最小 Y 値に配置します。 -
xMaxYMin - 均等な変倍を強制します。
要素の
viewBox
の<min-x>+<width>
をビューポートの最大 X 値に配置します。 要素のviewBox
の<min-y>
をビューポートの最小 Y 値に配置します。 -
xMinYMid - 均等な変倍を強制します。
要素の
viewBox
の<min-x>
をビューポートの最小 X 値に配置します。 要素のviewBox
の Y の中央値をビューポートの Y の中央値に配置します。 -
xMidYMid (the default) - 均等な変倍を強制します。
要素の
viewBox
の X の中央値をビューポートの X の中央値に配置します。 要素のviewBox
の Y の中央値をビューポートの Y の中央値に配置します。 -
xMaxYMid - 均等な変倍を強制します。
要素の
viewBox
の<min-x>+<width>
をビューポートの最大 X 値に配置します。 要素のviewBox
の Y の中央値をビューポートの Y の中央値に配置します。 -
xMinYMax - 均等な変倍を強制します。
要素の
viewBox
の<min-x>
をビューポートの最小 X 値に配置します。 要素のviewBox
の<min-y>+<height>
をビューポートの最大 Y 値に配置します。 -
xMidYMax - 均等な変倍を強制します。
要素の
viewBox
の X の中央値をビューポートの X の中央値に配置します。 要素のviewBox
の<min-y>+<height>
をビューポートの最大 Y 値に配置します。 -
xMaxYMax - 均等な変倍を強制します。
要素の
viewBox
の<min-x>+<width>
をビューポートの最大 X 値に配置します。 要素のviewBox
の<min-y>+<height>
をビューポートの最大 Y 値に配置します。
-
none
均等な変倍を強制しません。指定された要素のグラフィックコンテンツを、要素の外接ボックスがビューポートの長方形に正確に一致するように、必要に応じて不均一に変倍します。 もし
- meet または slice の参照
-
meetまたはslice参照はオプションで、指定された場合は以下のキーワードのいずれかでなければなりません:
要素
この属性は以下の SVG 要素で使用することができます。
feImage
<feImage>
(en-US) の場合、 preserveAspectRatio
は参照している画像が <feImage>
要素で定義した長方形に収まるように定義します。
値 | <align> <meetOrSlice>? |
---|---|
既定値 | xMidYMid meet |
アニメーション | 可 |
image
<image>
の場合、 preserveAspectRatio
は参照している画像が <feImage>
要素で定義した長方形に収まるように定義します。
値 | <align> <meetOrSlice>? |
---|---|
既定値 | xMidYMid meet |
アニメーション | 可 |
marker
<marker>
(en-US) の場合、 preserveAspectRatio
は、要素のビューポートに合わせて一様に変倍する必要があるかどうかを示します。
値 | <align> <meetOrSlice>? |
---|---|
既定値 | xMidYMid meet |
アニメーション | 可 |
pattern
<pattern>
の場合、 preserveAspectRatio
は、要素のビューポートに合わせて一様に変倍する必要があるかどうかを示します。
値 | <align> <meetOrSlice>? |
---|---|
既定値 | xMidYMid meet |
アニメーション | 可 |
svg
<svg>
の場合、 preserveAspectRatio
は、要素のビューポートに合わせて一様に変倍する必要があるかどうかを示します。
値 | <align> <meetOrSlice>? |
---|---|
既定値 | xMidYMid meet |
アニメーション | 可 |
symbol
<symbol>
(en-US) の場合、 preserveAspectRatio
は、要素のビューポートに合わせて一様に変倍する必要があるかどうかを示します。
値 | <align> <meetOrSlice>? |
---|---|
既定値 | xMidYMid meet |
アニメーション | 可 |
view
<view>
(en-US) の場合、 preserveAspectRatio
は、要素のビューポートに合わせて一様に変倍する必要があるかどうかを示します。
値 | <align> <meetOrSlice>? |
---|---|
既定値 | xMidYMid meet |
アニメーション | 可 |
仕様書
Specification |
---|
Filter Effects Module Level 1 # element-attrdef-feimage-preserveaspectratio |
Scalable Vector Graphics (SVG) 2 # PreserveAspectRatioAttribute |