The width
attribute defines the horizontal length of an element in the user coordinate system.
You can use this attribute with the SVG elements described in the sections below.
<feBlend>
For <feBlend>
, width
defines the horizontal length for the rendering area of the primitive.
<feColorMatrix>
For <feColorMatrix>
, width
defines the horizontal length for the rendering area of the primitive.
<feComponentTransfer>
For <feComponentTransfer>
, width
defines the horizontal length for the rendering area of the primitive.
<feComposite>
For <feComposite>
, width
defines the horizontal length for the rendering area of the primitive.
<feConvolveMatrix>
For <feConvolveMatrix>
, width
defines the horizontal length for the rendering area of the primitive.
<feDiffuseLighting>
For <feDiffuseLighting>
, width
defines the horizontal length for the rendering area of the primitive.
<feDisplacementMap>
For <feDisplacementMap>
, width
defines the horizontal length for the rendering area of the primitive.
<feDropShadow>
For <feDropShadow>
, width
defines the horizontal length for the rendering area of the primitive.
<feFlood>
For <feFlood>
, width
defines the horizontal length for the rendering area of the primitive.
<feGaussianBlur>
For <feGaussianBlur>
, width
defines the horizontal length for the rendering area of the primitive.
<feImage>
For <feImage>
, width
defines the horizontal length for the rendering area of the primitive.
<feMerge>
For <feMerge>
, width
defines the horizontal length for the rendering area of the primitive.
<feMorphology>
For <feMorphology>
, width
defines the horizontal length for the rendering area of the primitive.
<feOffset>
For <feOffset>
, width
defines the horizontal length for the rendering area of the primitive.
<feSpecularLighting>
For <feSpecularLighting>
, width
defines the horizontal length for the rendering area of the primitive.
<feTile>
For <feTile>
, width
defines the horizontal length for the rendering area of the primitive.
<feTurbulence>
For <feTurbulence>
, width
defines the horizontal length for the rendering area of the primitive.
<filter>
For <filter>
, width
defines the horizontal length for the rendering area of the filter.
<foreignObject>
For <foreignObject>
, width
defines the horizontal length for the rendering area for the referenced document.
Note: Starting with SVG2, width
is a Geometry Property meaning this attribute can also be used as a CSS property for <foreignObject>
.
<image>
For <image>
, width
defines the horizontal length for the image.
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.
<mask>
For <mask>
, width
defines the horizontal length of its area of effect. The exact effect of this attribute is influenced by the maskUnits
attribute.
<pattern>
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.
0
Animatable Yes <rect>
For <rect>
, width
defines the horizontal length for the rectangle.
Note: Starting with SVG2, width
is a Geometry Property meaning this attribute can also be used as a CSS property for rectangles.
<svg>
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
Note: Starting with SVG2, width
is a Geometry Property meaning this attribute can also be used as a CSS property for <svg>
.
<use>
For <use>
, width
defines the horizontal length for the referenced element.
Note: width
has no effect on use
elements, unless the element referenced has a viewBox - i.e., they only have an effect when use
refers to a svg
or symbol
element.
Note: Starting with SVG2, width
is a Geometry Property meaning this attribute can also be used as a CSS property for used elements.
html,
body,
svg {
height: 100%;
}
This example includes three <rect>
elements with varied width
attribute values. The first <rect>
has a width="0"
set. SVG elements with a width of 0
or less are not rendered.
<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"
fill="red"
stroke-width="5"
stroke="black" />
<rect
x="0"
y="100"
width="60"
height="90"
fill="red"
stroke-width="5"
stroke="black" />
<rect
x="0"
y="200"
width="100%"
height="90"
fill="red"
stroke-width="5"
stroke="black" />
</svg>
Specifications See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4