width

Das width-Attribut definiert die horizontale Länge eines Elements im Benutzerkoordinatensystem.

Elemente

Sie können dieses Attribut mit den unten beschriebenen SVG-Elementen verwenden.

`<feBlend>`

Für <feBlend> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feColorMatrix>`

Für <feColorMatrix> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feComponentTransfer>`

Für <feComponentTransfer> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feComposite>`

Für <feComposite> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feConvolveMatrix>`

Für <feConvolveMatrix> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feDiffuseLighting>`

Für <feDiffuseLighting> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feDisplacementMap>`

Für <feDisplacementMap> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feDropShadow>`

Für <feDropShadow> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feFlood>`

Für <feFlood> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feGaussianBlur>`

Für <feGaussianBlur> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feImage>`

Für <feImage> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feMerge>`

Für <feMerge> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feMorphology>`

Für <feMorphology> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feOffset>`

Für <feOffset> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feSpecularLighting>`

Für <feSpecularLighting> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feTile>`

Für <feTile> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<feTurbulence>`

Für <feTurbulence> definiert width die horizontale Länge für den Anzeigebereich der primitiven.

Wert	<length> \| <percentage>
Standardwert	`100%`
Animierbar	Ja

`<filter>`

Für <filter> definiert width die horizontale Länge für den Anzeigebereich des Filters.

Wert	<length> \| <percentage>
Standardwert	`120%`
Animierbar	Ja

`<foreignObject>`

Für <foreignObject> definiert width die horizontale Länge des Anzeigebereichs für das referenzierte Dokument.

Wert	`auto` \| <length> \| <percentage>
Standardwert	`auto` (behandelt als `0`)
Animierbar	Ja

Hinweis: Ab SVG2 ist width eine Geometrie-Eigenschaft, 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 für das Bild.

Wert	`auto` \| <length> \| <percentage>
Standardwert	`auto` (behandelt als die intrinsische Breite des Bildes)
Animierbar	Ja

Hinweis: Ab SVG2 ist width eine Geometrie-Eigenschaft, 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. Die genaue Wirkung 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. Die genaue Wirkung dieses Attributs wird durch die patternUnits- und patternTransform-Attribute beeinflusst.

Wert	<length>
Standardwert	`0`
Animierbar	Ja

`<rect>`

Für <rect> definiert width die horizontale Länge für das Rechteck.

Wert	`auto` \| <length> \| <percentage>
Standardwert	`auto` (behandelt als `0`)
Animierbar	Ja

Hinweis: Ab SVG2 ist width eine Geometrie-Eigenschaft, 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 für den Anzeigebereich des SVG-Viewports.

Hinweis: In einem HTML-Dokument, wenn sowohl das viewBox-Attribut als auch das width-Attribut weggelassen werden, wird das SVG-Element mit einer Breite von 300px angezeigt

Wert	`auto` \| <length> \| <percentage>
Standardwert	`auto` (behandelt als `100%`)
Animierbar	Ja

Hinweis: Ab SVG2 ist width eine Geometrie-Eigenschaft, 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 für das referenzierte Element.

Wert	`auto` \| <length> \| <percentage>
Standardwert	`auto` (behandelt als `0`)
Animierbar	Ja

Hinweis: width hat keine Wirkung auf use-Elemente, es sei denn, das referenzierte Element hat ein viewBox, d.h. sie haben nur eine Wirkung, wenn use auf ein svg- oder symbol-Element verweist.

Hinweis: Ab SVG2 ist width eine Geometrie-Eigenschaft, was bedeutet, dass dieses Attribut auch als CSS-Eigenschaft für verwendete Elemente verwendet werden kann.

Beispiele

html,
body,
svg {
  height: 100%;
}

Dieses Beispiel enthält drei <rect>-Elemente mit unterschiedlichen width-Attributwerten. Das erste <rect>-Element hat width="0" gesetzt. SVG-Elemente mit einer Breite von 0 oder weniger werden nicht gerendert.

html

<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>

Spezifikationen

Specification
Filter Effects Module Level 1 # element-attrdef-filter-width
Filter Effects Module Level 1 # element-attrdef-filter-primitive-width
CSS Masking Module Level 1 # element-attrdef-mask-width
Scalable Vector Graphics (SVG) 2 # Sizing
Scalable Vector Graphics (SVG) 2 # PatternElementWidthAttribute

Siehe auch

CSS width Eigenschaft