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 Renderingbereich der Primitiven.

<feColorMatrix>

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

<feComponentTransfer>

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

<feComposite>

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

<feConvolveMatrix>

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

<feDiffuseLighting>

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

<feDisplacementMap>

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

<feDropShadow>

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

<feFlood>

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

<feFuncA>

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

<feFuncB>

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

<feFuncG>

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

<feFuncR>

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

<feGaussianBlur>

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

<feImage>

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

<feMerge>

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

<feMergeNode>

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

<feMorphology>

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

<feOffset>

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

<fePointLight>

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

<feSpecularLighting>

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

<feSpotLight>

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

<feTile>

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

<feTurbulence>

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

<filter>

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

<foreignObject>

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

<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 Attribut maskUnits beeinflusst.

<pattern>

Für <pattern> definiert y die y-Koordinate der oberen linken Ecke des Kachelmusters. Die genaue Wirkung dieses Attributs wird durch die Attribute patternUnits und patternTransform 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 Ansichtsbereichs.

<text>

Für <text>, wenn es einen Einzelwert enthält, definiert y die y-Koordinate, an der die Position des Textinhalts platziert werden muss. Die Position des Textinhalts ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Position des Textinhalts wird von anderen Eigenschaften wie text-anchor oder direction beeinflusst.

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 Übereinstimmung 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;
}

<tspan>

Für <tspan>, wenn es einen Einzelwert enthält, definiert y die y-Koordinate, an der die Position des Textinhalts platziert werden muss. Die Position des Textinhalts ist normalerweise ein Punkt auf der Grundlinie der ersten Textzeile. Die genaue Position des Textinhalts wird von anderen Eigenschaften wie text-anchor oder direction beeinflusst.

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 Übereinstimmung 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;
}

<use>

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

Beispiele

Dieses Beispiel enthält drei <rect> Elemente, jedes mit einem kleineren y-Wert als der vorherige.

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