width
width 属性は、ユーザー座標系における要素の水平方向の長さを定義します。
この属性は以下の SVG 要素で使用することができます。
<feBlend>(en-US)<feColorMatrix><feComponentTransfer>(en-US)<feComposite>(en-US)<feConvolveMatrix>(en-US)<feDiffuseLighting>(en-US)<feDisplacementMap>(en-US)<feDropShadow><feFlood>(en-US)<feGaussianBlur><feImage>(en-US)<feMerge>(en-US)<feMorphology><feOffset><feSpecularLighting>(en-US)<feTile>(en-US)<feTurbulence>(en-US)<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> (en-US) の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feColorMatrix
<feColorMatrix> の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feComponentTransfer
<feComponentTransfer> (en-US) の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feComposite
<feComposite> (en-US) の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feConvolveMatrix
<feConvolveMatrix> (en-US) の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feDiffuseLighting
<feDiffuseLighting> (en-US) の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feDisplacementMap
<feDisplacementMap> (en-US) の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feDropShadow
<feDropShadow> の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feFlood
<feFlood> (en-US) の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feGaussianBlur
<feGaussianBlur> の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feImage
<feImage> (en-US) の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feMerge
<feMerge> (en-US) の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feMorphology
<feMorphology> の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feOffset
<feOffset> の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feSpecularLighting
<feSpecularLighting> (en-US) の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feTile
<feTile> (en-US) の場合、 width はプリミティブの描画領域の水平方向の長さを定義します。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 100% |
| アニメーション | 可 |
feTurbulence
<feTurbulence> (en-US) の場合、 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 (en-US) 属性の影響を受けます。
| 値 | <length> | <percentage> |
|---|---|
| 既定値 | 120% |
| アニメーション | 可 |
pattern
<pattern> の場合、 width はタイルパターンの水平方向の長さを定義します。この属性の正確な効果は、 patternUnits と patternTransform (en-US) 属性の影響を受けます。
| 値 | <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 プロパティとしても使用することができます。