width
Das width
Attribut definiert die horizontale Länge eines Elements im Benutzerkoordinatensystem.
Elemente
Sie können dieses Attribut mit den in den folgenden Abschnitten beschriebenen SVG-Elementen verwenden.
<feBlend>
Für <feBlend>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feColorMatrix>
Für <feColorMatrix>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feComponentTransfer>
Für <feComponentTransfer>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feComposite>
Für <feComposite>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feConvolveMatrix>
Für <feConvolveMatrix>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feDiffuseLighting>
Für <feDiffuseLighting>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feDisplacementMap>
Für <feDisplacementMap>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feDropShadow>
Für <feDropShadow>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feFlood>
Für <feFlood>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feGaussianBlur>
Für <feGaussianBlur>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feImage>
Für <feImage>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feMerge>
Für <feMerge>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feMorphology>
Für <feMorphology>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feOffset>
Für <feOffset>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feSpecularLighting>
Für <feSpecularLighting>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feTile>
Für <feTile>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<feTurbulence>
Für <feTurbulence>
definiert width
die horizontale Länge des Darstellungsbereichs der Primitiven.
Wert | <length> | <percentage> |
---|---|
Standardwert | 100% |
Animierbar | Ja |
<filter>
Für <filter>
definiert width
die horizontale Länge des Darstellungsbereichs des Filters.
Wert | <length> | <percentage> |
---|---|
Standardwert | 120% |
Animierbar | Ja |
<foreignObject>
Für <foreignObject>
definiert width
die horizontale Länge des Darstellungsbereichs des referenzierten Dokuments.
Wert |
auto |
<length>
|
<percentage>
|
---|---|
Standardwert | auto (behandelt als 0 ) |
Animierbar | Ja |
Hinweis:
Ab SVG2 ist width
eine Geometrieeigenschaft, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für <foreignObject>
verwendet werden kann.
<image>
Für <image>
definiert width
die horizontale Länge des Bildes.
Wert |
auto |
<length>
|
<percentage>
|
---|---|
Standardwert | auto (behandelt als die intrinsische Breite des Bildes) |
Animierbar | Ja |
Hinweis:
Ab SVG2 ist width
eine Geometrieeigenschaft, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für Bilder verwendet werden kann.
<mask>
Für <mask>
definiert width
die horizontale Länge seines Wirkungsbereichs. Der genaue Effekt dieses Attributs wird durch das maskUnits
Attribut beeinflusst.
Wert | <length> | <percentage> |
---|---|
Standardwert | 120% |
Animierbar | Ja |
<pattern>
Für <pattern>
definiert width
die horizontale Länge des Kachelmusters. Der genaue Effekt dieses Attributs wird durch die Attribute patternUnits
und patternTransform
beeinflusst.
Wert | <length> |
---|---|
Standardwert | 0 |
Animierbar | Ja |
<rect>
Für <rect>
definiert width
die horizontale Länge des Rechtecks.
Wert |
auto |
<length>
|
<percentage>
|
---|---|
Standardwert | auto (behandelt als 0 ) |
Animierbar | Ja |
Hinweis:
Ab SVG2 ist width
eine Geometrieeigenschaft, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für Rechtecke verwendet werden kann.
<svg>
Für <svg>
definiert width
die horizontale Länge des Darstellungsbereichs des SVG-Viewports.
Hinweis:
In einem HTML-Dokument, wenn sowohl das viewBox
als auch das width
-Attribut weggelassen werden, wird das svg-Element mit einer Breite von 300px
dargestellt
Wert |
auto |
<length>
|
<percentage>
|
---|---|
Standardwert | auto (behandelt als 100% ) |
Animierbar | Ja |
Hinweis:
Ab SVG2 ist width
eine Geometrieeigenschaft, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für <svg>
verwendet werden kann.
<use>
Für <use>
definiert width
die horizontale Länge des referenzierten Elements.
Wert |
auto |
<length>
|
<percentage>
|
---|---|
Standardwert | auto (behandelt als 0 ) |
Animierbar | Ja |
Hinweis: width
hat keinen Effekt auf use
-Elemente, außer das referenzierte Element hat ein viewBox - d. h. sie haben nur dann eine Wirkung, wenn use
auf ein svg
- oder symbol
-Element verweist.
Hinweis:
Ab SVG2 ist width
eine Geometrieeigenschaft, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für verwendete Elemente verwendet werden kann.
Beispiele
Dieses Beispiel enthält drei <rect>
Elemente mit unterschiedlichen width
Attributwerten. Das erste <rect>
hat ein width="0"
gesetzt. SVG-Elemente mit einer Breite von 0
oder weniger werden nicht gerendert.
<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>