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.

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