y

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 Darstellungsbereich des Primitives.

<feColorMatrix>

Für <feColorMatrix> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feComponentTransfer>

Für <feComponentTransfer> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feComposite>

Für <feComposite> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feConvolveMatrix>

Für <feConvolveMatrix> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feDiffuseLighting>

Für <feDiffuseLighting> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feDisplacementMap>

Für <feDisplacementMap> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feDropShadow>

Für <feDropShadow> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feFlood>

Für <feFlood> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feFuncA>

Für <feFuncA> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feFuncB>

Für <feFuncB> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feFuncG>

Für <feFuncG> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feFuncR>

Für <feFuncR> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feGaussianBlur>

Für <feGaussianBlur> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feImage>

Für <feImage> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feMerge>

Für <feMerge> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feMergeNode>

Für <feMergeNode> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feMorphology>

Für <feMorphology> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feOffset>

Für <feOffset> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<fePointLight>

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

<feSpecularLighting>

Für <feSpecularLighting> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feSpotLight>

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

<feTile>

Für <feTile> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<feTurbulence>

Für <feTurbulence> definiert y die minimale y-Koordinate für den Darstellungsbereich des Primitives.

<filter>

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

<foreignObject>

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

<image>

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

<mask>

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

<pattern>

Für <pattern> definiert y die y-Koordinate der oberen linken Ecke des Fliesenmusters. Die genaue Wirkung dieses Attributs wird durch die patternUnits und patternTransform Attribute beeinflusst.

<rect>

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

<svg>

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

<text>

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

Wenn es mehrere Werte enthält, definiert y die y-Koordinate jedes einzelnen Glyphs aus dem Text. Wenn es weniger Werte als Glyphs gibt, werden die verbleibenden Glyphs in der Linie mit dem zuletzt positionierten Glyph platziert. Wenn es mehr Werte als Glyphs 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;
}

<tspan>

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

Wenn es mehrere Werte enthält, definiert y die y-Koordinate jedes einzelnen Glyphs aus dem Text. Wenn es weniger Werte als Glyphs gibt, werden die verbleibenden Glyphs in der Linie mit dem zuletzt positionierten Glyph platziert. Wenn es mehr Werte als Glyphs 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;
}

<use>

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

Beispiele

Dieses Beispiel enthält drei <rect>-Elemente, die jeweils einen kleiner werdenden y Wert haben.

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>

Spezifikationen

Siehe auch

• CSS y Eigenschaft