y

Dieses Attribut kann mit den in den folgenden Abschnitten beschriebenen SVG-Elementen verwendet werden.

Für <feBlend> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feColorMatrix> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feComponentTransfer> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feComposite> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feConvolveMatrix> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feDiffuseLighting> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feDisplacementMap> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feDropShadow> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feFlood> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feFuncA> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feFuncB> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feFuncG> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feFuncR> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feGaussianBlur> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feImage> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feMerge> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feMergeNode> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feMorphology> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feOffset> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

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

Für <feSpecularLighting> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

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

Für <feTile> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

Für <feTurbulence> definiert y die minimale y-Koordinate für den Rendering-Bereich der Primitiven.

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

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

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

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

Für <mask> definiert y die y-Koordinate der oberen linken Ecke seines Wirkungsbereichs. Die genaue Wirkung dieses Attributs wird vom maskUnits-Attribut beeinflusst.

Für <pattern> definiert y die y-Koordinate der oberen linken Ecke des Kachelmusters. Die genaue Wirkung dieses Attributs wird von den patternUnits- und patternTransform-Attributen beeinflusst.

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

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

Für <text>, wenn es einen einzelnen Wert enthält, definiert y die y-Koordinate, an der die Textpositionsinhalte platziert werden müssen. Die Textpositionsinhalte sind normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Textpositionsinhalte wird von anderen Eigenschaften wie text-anchor oder direction beeinflusst.

Wenn es mehrere Werte enthält, definiert y die y-Koordinate jedes einzelnen Glyphen des Textes. 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.

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

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

text {
  font: 40px sans-serif;
}

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

Für <tref>, wenn es einen einzelnen Wert enthält, definiert y die y-Koordinate, an der die Textpositionsinhalte platziert werden müssen. Die Textpositionsinhalte sind normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Textpositionsinhalte wird von anderen Eigenschaften wie text-anchor oder direction beeinflusst.

Wenn es mehrere Werte enthält, definiert y die y-Koordinate jedes einzelnen Glyphen des Textes. 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.

Für <tspan>, wenn es einen einzelnen Wert enthält, definiert y die y-Koordinate, an der die Textpositionsinhalte platziert werden müssen. Die Textpositionsinhalte sind normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Textpositionsinhalte wird von anderen Eigenschaften wie text-anchor oder direction beeinflusst.

Wenn es mehrere Werte enthält, definiert y die y-Koordinate jedes einzelnen Glyphen des Textes. 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.

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

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

text {
  font: 40px sans-serif;
}

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

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

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

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

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