width
width
属性は、ユーザー座標系における要素の水平方向の長さを定義します。
この属性は以下の SVG 要素で使用することができます。
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDropShadow>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset>
<feSpecularLighting>
<feTile>
<feTurbulence>
<filter>
<foreignObject>
<image>
<mask>
<pattern>
<rect>
<svg>
<use>
例
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
<!-- With a width of 0 or less, nothing will be rendered -->
<rect x="0" y="0" width="0" height="90" />
<rect x="0" y="100" width="60" height="90" />
<rect x="0" y="200" width="100%" height="90" />
</svg>
feBlend
<feBlend>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feColorMatrix
<feColorMatrix>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feComponentTransfer
<feComponentTransfer>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feComposite
<feComposite>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feConvolveMatrix
<feConvolveMatrix>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feDiffuseLighting
<feDiffuseLighting>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feDisplacementMap
<feDisplacementMap>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feDropShadow
<feDropShadow>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feFlood
<feFlood>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feGaussianBlur
<feGaussianBlur>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feImage
<feImage>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feMerge
<feMerge>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feMorphology
<feMorphology>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feOffset
<feOffset>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feSpecularLighting
<feSpecularLighting>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feTile
<feTile>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
feTurbulence
<feTurbulence>
の場合、 width
はプリミティブの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 100% |
アニメーション | 可 |
filter
<filter>
の場合、 width
はフィルターの描画領域の水平方向の長さを定義します。
値 | <length> | <percentage> |
---|---|
既定値 | 120% |
アニメーション | 可 |
foreignObject
<foreignObject>
の場合、 width
は参照先の文書の描画領域の水平方向の長さを定義します。
値 |
auto |
<length>
|
<percentage>
|
---|---|
既定値 | auto (treated as 0 ) |
アニメーション | 可 |
メモ: SVG2 から width
は幾何プロパティであり、この属性は <foreignObject>
の CSS プロパティとしても使用することができます。
image
<image>
の場合、 width
は画像の水平方向の長さを定義します。
値 |
auto |
<length>
|
<percentage>
|
---|---|
既定値 | auto (画像の内在的な幅として扱われる) |
アニメーション | 可 |
メモ: SVG2 から width
は幾何プロパティであり、この属性は画像の CSS プロパティとしても使用することができます。
mask
<mask>
の場合、 width
は効果の領域の水平方向の長さを定義します。この属性の正確な効果は、maskUnits
属性の影響を受けます。
値 | <length> | <percentage> |
---|---|
既定値 | 120% |
アニメーション | 可 |
pattern
<pattern>
の場合、 width
はタイルパターンの水平方向の長さを定義します。この属性の正確な効果は、 patternUnits
と patternTransform
属性の影響を受けます。
値 | <length> |
---|---|
既定値 | 0 |
アニメーション | 可 |
rect
<rect>
の場合、 width
は矩形の水平方向の長さを定義します。
値 |
auto |
<length>
|
<percentage>
|
---|---|
既定値 | auto (0 として扱われる) |
アニメーション | 可 |
メモ: SVG2 から width
は幾何プロパティであり、この属性は矩形の CSS プロパティとしても使用することができます。
svg
<svg>
の場合、 width
は SVG ビューポートの描画領域の水平方向の長さを定義します。
メモ: HTML 文書内の viewBox
属性と width
属性の両方が省略された場合、 svg 要素は幅 300px
で表示されます。
値 |
auto |
<length>
|
<percentage>
|
---|---|
既定値 | auto (treated as 100% ) |
アニメーション | 可 |
メモ: SVG2 から width
は幾何プロパティであり、この属性は <svg>
の CSS プロパティとしても使用することができます。
use
<use>
の場合、 width
は参照先要素の水平方向の長さを定義します。
値 |
auto |
<length>
|
<percentage>
|
---|---|
既定値 | auto (0 として扱われる) |
アニメーション | 可 |
メモ: 参照する要素が viewBox を持っていない限り、 width
は use
要素には効果がありません。つまり、use
が svg
または symbol
要素を参照している場合にのみ効果があります。
メモ: SVG2 から width
は幾何プロパティであり、この属性は使用される要素の CSS プロパティとしても使用することができます。