y

Das y Attribut definiert eine Koordinate auf der y-Achse im Benutzerkoordinatensystem.

Elemente

Sie können dieses Attribut mit den in den folgenden Abschnitten beschriebenen SVG-Elementen verwenden.

`<feBlend>`

Für <feBlend> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feColorMatrix>`

Für <feColorMatrix> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feComponentTransfer>`

Für <feComponentTransfer> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feComposite>`

Für <feComposite> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feConvolveMatrix>`

Für <feConvolveMatrix> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feDiffuseLighting>`

Für <feDiffuseLighting> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feDisplacementMap>`

Für <feDisplacementMap> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feDropShadow>`

Für <feDropShadow> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feFlood>`

Für <feFlood> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feFuncA>`

Für <feFuncA> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feFuncB>`

Für <feFuncB> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feFuncG>`

Für <feFuncG> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feFuncR>`

Für <feFuncR> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feGaussianBlur>`

Für <feGaussianBlur> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feImage>`

Für <feImage> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feMerge>`

Für <feMerge> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feMergeNode>`

Für <feMergeNode> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feMorphology>`

Für <feMorphology> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feOffset>`

Für <feOffset> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<fePointLight>`

Für <fePointLight> definiert y die y-Position der Lichtquelle im Koordinatensystem, das durch das Attribut primitiveUnits auf dem Element <filter> definiert wird.

Wert	<number>
Standardwert	`0`
Animierbar	Ja

`<feSpecularLighting>`

Für <feSpecularLighting> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feSpotLight>`

Für <feSpotLight> definiert y die y-Position der Lichtquelle im Koordinatensystem, das durch das Attribut primitiveUnits auf dem Element <filter> definiert wird.

Wert	<number>
Standardwert	`0`
Animierbar	Ja

`<feTile>`

Für <feTile> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<feTurbulence>`

Für <feTurbulence> definiert y die minimale y-Koordinate für den Anzeigebereich der primitiven Form.

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

`<filter>`

Für <filter> definiert y die y-Koordinate der oberen linken Ecke für den Anzeigebereich des Filters.

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

`<foreignObject>`

Für <foreignObject> definiert y die y-Koordinate der oberen linken Ecke seines Ansichtsfensters.

Wert	<length> \| <percentage>
Standardwert	`0`
Animierbar	Ja

Hinweis: Die Koordinate auf der y-Achse des <foreignObject> kann auch mit der y Geometrie-Eigenschaft definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der y-Eigenschaft den Wert des y-Attributes.

`<glyphRef>`

Warnung: Ab SVG2 ist <glyphRef> veraltet und sollte nicht mehr verwendet werden.

Für <glyphRef> definiert y die y-Koordinate des Glyphe.

Wert	<number>
Standardwert	none
Animierbar	Ja

`<image>`

Für <image> definiert y die y-Koordinate der oberen linken Ecke des Bildes.

Wert	<length> \| <percentage>
Standardwert	`0`
Animierbar	Ja

Hinweis: Die Koordinate auf der y-Achse des <image> kann auch mit der y Geometrie-Eigenschaft definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der y-Eigenschaft den Wert des y-Attributes.

`<mask>`

Für <mask> definiert y die y-Koordinate der oberen linken Ecke seines Wirkungsbereichs. Der genaue Effekt dieses Attributes wird durch das Attribut maskUnits beeinflusst.

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

`<pattern>`

Für <pattern> definiert y die y-Koordinate der oberen linken Ecke des Kachelmusters. Der genaue Effekt dieses Attributes wird durch die Attribute patternUnits und patternTransform beeinflusst.

Wert	<length>
Standardwert	`0`
Animierbar	Ja

`<rect>`

Für <rect> definiert y die y-Koordinate der oberen linken Ecke der Form.

Wert	<length> \| <percentage>
Standardwert	`0`
Animierbar	Ja

Hinweis: Die Koordinate auf der y-Achse des <rect> kann auch mit der y Geometrie-Eigenschaft definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der y-Eigenschaft den Wert des y-Attributes.

`<svg>`

Für <svg> definiert y die y-Koordinate der oberen linken Ecke seines Ansichtsfensters.

Wert	<length> \| <percentage>
Standardwert	`0`
Animierbar	Ja

Hinweis: Die Koordinate auf der y-Achse des <svg> kann auch mit der y Geometrie-Eigenschaft definiert werden. Wenn sie in CSS gesetzt ist, überschreibt der Wert der y-Eigenschaft den Wert des y-Attributes.

`<text>`

Für <text>, wenn es einen einzelnen Wert enthält, definiert y die y-Koordinate, an der die Inhaltstextposition platziert werden muss. Die Inhaltstextposition ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Inhaltstextposition wird durch andere Eigenschaften beeinflusst, wie text-anchor oder direction.

Wenn es mehrere Werte enthält, definiert y die y-Koordinate jedes einzelnen Glyphen aus dem Text. Wenn es weniger Werte als Glyphen gibt, werden die verbleibenden Glyphen in einer Linie mit dem zuletzt positionierten Glyphen platziert. Wenn es mehr Werte als Glyphen gibt, werden die zusätzlichen Werte ignoriert.

Wert	Liste von (<length> \| <percentage>)
Standardwert	`0`
Animierbar	Ja

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

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="60%" x2="100%" y2="60%" />
  <line x1="0" y1="80%" x2="100%" y2="80%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="5%" y1="0" x2="5%" y2="100%" />
  <line x1="55%" y1="0" x2="55%" y2="100%" />

  <!-- y with a single value -->
  <text y="40%" x="5%">SVG</text>

  <!-- y with multiple values -->
  <text y="40%,60%,80%" x="55%">SVG</text>
</svg>

css

text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}

`<tref>`

Warnung: Ab SVG2 ist <tref> veraltet und sollte nicht mehr verwendet werden.

Für <tref>, wenn es einen einzelnen Wert enthält, definiert y die y-Koordinate, an der die Inhaltstextposition platziert werden muss. Die Inhaltstextposition ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Inhaltstextposition wird durch andere Eigenschaften beeinflusst, wie text-anchor oder direction.

Wert	Liste von (<length> \| <percentage>)
Standardwert	`0`
Animierbar	Ja

`<tspan>`

Für <tspan>, wenn es einen einzelnen Wert enthält, definiert y die y-Koordinate, an der die Inhaltstextposition platziert werden muss. Die Inhaltstextposition ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Inhaltstextposition wird durch andere Eigenschaften beeinflusst, wie text-anchor oder direction.

Wert	Liste von (<length> \| <percentage>)
Standardwert	none
Animierbar	Ja

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

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="60%" x2="100%" y2="60%" />
  <line x1="0" y1="80%" x2="100%" y2="80%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="5%" y1="0" x2="5%" y2="100%" />
  <line x1="55%" y1="0" x2="55%" y2="100%" />

  <text>
    <!-- y with a single value -->
    <tspan y="40%" x="5%">SVG</tspan>

    <!-- y with multiple values -->
    <tspan y="40%,60%,80%" x="55%">SVG</tspan>
  </text>
</svg>

css

text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}

`<use>`

Für <use> definiert y die y-Koordinate der oberen linken Ecke des referenzierten Elements.

Wert	<length> \| <percentage>
Standardwert	`0`
Animierbar	Ja

Hinweis: Die Deklaration eines <length>- oder <percentage>-Werts in CSS mit der y Geometrie-Eigenschaft überschreibt die y-Koordinate des <use>, die durch das y-Attribut in einigen Browsern festgelegt wird. Dieses Verhalten ist gefährdet.

Beispiele

Dieses Beispiel enthält drei <rect> Elemente, von denen jedes einen kleineren y-Wert hat als der vorherige.

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

html

<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <rect y="220" x="20" width="60" height="60" fill="red" />
  <rect y="120" x="20" width="60" height="60" fill="yellow" />
  <rect y="20" x="20" width="60" height="60" fill="purple" />
</svg>

Spezifikationen

Specification
Filter Effects Module Level 1 # element-attrdef-filter-y
Filter Effects Module Level 1 # element-attrdef-fespotlight-y
Filter Effects Module Level 1 # element-attrdef-fepointlight-y
Filter Effects Module Level 1 # element-attrdef-filter-primitive-y
CSS Masking Module Level 1 # element-attrdef-mask-y
Scalable Vector Graphics (SVG) 2 # Y
Scalable Vector Graphics (SVG) 2 # PatternElementYAttribute
Scalable Vector Graphics (SVG) 2 # TextElementYAttribute

Siehe auch

CSS y Eigenschaft