cy

Dascy-Attribut definiert die Koordinate der y-Achse eines Mittelpunktes.

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

Hinweis:AlsGeometrieeigenschaft kanncy auch als CSS-Eigenschaft für<circle> und<ellipse> verwendet werden.

Beispiel

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

html

<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">  <radialGradient cy="25%">    <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> definiertcy 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 dercyGeometrieeigenschaft definiert werden. Wenn es in CSS gesetzt ist, überschreibt der Wert dercy-Eigenschaft den Wert descy-Attributs.

Ellipse

Für<ellipse> definiertcy 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 dercyGeometrieeigenschaft definiert werden. Wenn es in CSS gesetzt ist, überschreibt der Wert dercy-Eigenschaft den Wert descy-Attributs.

RadialGradient

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

Wert	<length>
Standardwert	`50%`
Animierbar	Ja

Beispiel

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

html

<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">  <defs>    <radialGradient cy="0">      <stop offset="0%" stop-color="gold" />      <stop offset="50%" stop-color="green" />      <stop offset="100%" stop-color="white" />    </radialGradient>    <radialGradient cy="50%">      <stop offset="0%" stop-color="gold" />      <stop offset="50%" stop-color="green" />      <stop offset="100%" stop-color="white" />    </radialGradient>    <radialGradient cy="100%">      <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>