1. Web
  2. SVG
  3. Reference
  4. Attributes
  5. cy

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

cy

Das cy-Attribut definiert die Koordinate der y-Achse eines Mittelpunktes.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Hinweis: Als Geometrieeigenschaft kann cy auch als CSS-Eigenschaft für <circle> und <ellipse> verwendet werden.

Beispiel

html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cy="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cy="50" cx="50" r="45" />
  <ellipse cy="150" cx="50" rx="45" ry="25" />
  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
</svg>

Kreis

Für <circle> definiert cy die y-Achsen-Koordinate des Mittelpunktes der Form.

Wert <length-percentage>
Standardwert 0
Animierbar Ja

Hinweis: Die y-Achsen-Koordinate des Mittelpunktes des <circle> kann auch mit der cy Geometrieeigenschaft definiert werden. Wenn es in CSS gesetzt ist, überschreibt der Wert der cy-Eigenschaft den Wert des cy-Attributs.

Ellipse

Für <ellipse> definiert cy die y-Achsen-Koordinate des Mittelpunktes der Form.

Wert <length-percentage>
Standardwert 0
Animierbar Ja

Hinweis: Die y-Achsen-Koordinate des Mittelpunktes der <ellipse> kann auch mit der cy Geometrieeigenschaft definiert werden. Wenn es in CSS gesetzt ist, überschreibt der Wert der cy-Eigenschaft den Wert des cy-Attributs.

RadialGradient

Für <radialGradient> definiert cy die y-Achsen-Koordinate des Endkreises für den radialen Verlauf.

Wert <length>
Standardwert 50%
Animierbar Ja

Beispiel

html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cy="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cy="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
    x="1"
    y="1"
    width="8"
    height="8"
    fill="url(#myGradient000)"
    stroke="black" />
  <rect
    x="13"
    y="1"
    width="8"
    height="8"
    fill="url(#myGradient050)"
    stroke="black" />
  <rect
    x="25"
    y="1"
    width="8"
    height="8"
    fill="url(#myGradient100)"
    stroke="black" />
</svg>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# RadialGradientElementCYAttribute

Browser-Kompatibilität

svg.elements.circle.cy

svg.elements.ellipse.cy

svg.elements.radialGradient.cy

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden