The width
attribute defines the horizontal length of an element in the user coordinate system.
Twenty five elements are using this attribute: <feBlend>
, <feColorMatrix>
, <feComponentTransfer>
, <feComposite>
, <feConvolveMatrix>
, <feDiffuseLighting>
, <feDisplacementMap>
, <feDropShadow>
, <feFlood>
, <feGaussianBlur>
, <feImage>
, <feMerge>
, <feMorphology>
, <feOffset>
, <feSpecularLighting>
, <feTile>
, <feTurbulence>
, <filter>
, <foreignObject>
, <image>
, <mask>
, <pattern>
, <rect>
, <svg>
, and <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>
For <feBlend>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feColorMatrix>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feComponentTransfer>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feComposite>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feConvolveMatrix>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feDiffuseLighting>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feDisplacementMap>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feDropShadow>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feFlood>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feGaussianBlur>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feImage>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feMerge>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feMorphology>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feOffset>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feSpecularLighting>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feTile>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <feTurbulence>
, width
defines the horizontal length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
For <filter>
, width
defines the horizontal length for the rendering area of the filter.
Value | <length> | <percentage> |
---|---|
Default value | 120% |
Animatable | Yes |
For <foreignObject>
, width
defines the horizontal length for the rendering area for the referenced document.
Value |
auto | <length> | <percentage>
|
---|---|
Default value |
auto (treated as 0 ) |
Animatable | Yes |
Note: Starting with SVG2, width
is a Geometry Property meaning this attribute can also be used as a CSS property for <foreignObject>
.
For <image>
, width
defines the horizontal length for the image.
Value |
auto | <length> | <percentage>
|
---|---|
Default value |
auto (treated as the intrinsic width of the image) |
Animatable | Yes |
Note: Starting with SVG2, width
is a Geometry Property meaning this attribute can also be used as a CSS property for images.
For <mask>
, width
defines the horizontal length of its area of effect. The exact effect of this attribute is influenced by the maskUnits
attribute.
Value | <length> | <percentage> |
---|---|
Default value | 120% |
Animatable | Yes |
For <pattern>
, width
defines the horizontal length of the tile pattern. The exact effect of this attribute is influenced by the patternUnits
and patternTransform
attributes.
Value | <length> |
---|---|
Default value | 0 |
Animatable | Yes |
For <rect>
, width
defines the horizontal length for the rectangle.
Value |
auto | <length> | <percentage>
|
---|---|
Default value |
auto (treated as 0 ) |
Animatable | Yes |
Note: Starting with SVG2, width
is a Geometry Property meaning this attribute can also be used as a CSS property for rectangles.
For <svg>
, width
defines the horizontal length for the rendering area of the SVG viewport.
Note: In an HTML document if both the viewBox
and width
attributes are omitted, the svg element will be rendered with a width of 300px
Value |
auto | <length> | <percentage>
|
---|---|
Default value |
auto (treated as 100% ) |
Animatable | Yes |
Note: Starting with SVG2, width
is a Geometry Property meaning this attribute can also be used as a CSS property for <svg>
.
For <use>
, width
defines the horizontal length for the referenced element.
Value |
auto | <length> | <percentage>
|
---|---|
Default value |
auto (treated as 0 ) |
Animatable | Yes |
Note: Starting with SVG2, width
is a Geometry Property meaning this attribute can also be used as a CSS property for used elements.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width