cx

Dascx-Attribut definiert die x-Achsen-Koordinate eines Mittelpunktes.

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

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

Beispiel

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

html

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">  <radialGradient cx="25%">    <stop offset="0" stop-color="white" />    <stop offset="100%" stop-color="black" />  </radialGradient>  <circle cx="50" cy="50" r="45" />  <ellipse cx="150" cy="50" rx="45" ry="25" />  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" /></svg>

circle

Für<circle> definiertcx die x-Achsen-Koordinate des Mittelpunkts der Form.

Wert	`<length-percentage>`
Standardwert	`0`
Animierbar	Ja

Hinweis:Die x-Achsen-Koordinate des Mittelpunkts des<circle> kann auch mit dercxGeometrie-Eigenschaft definiert werden. Wenn in CSS festgelegt, überschreibt dercx-Eigenschaftswert dencx-Attributwert.

ellipse

Für<ellipse> definiertcx die x-Achsen-Koordinate des Mittelpunkts der Form.

Wert	`<length-percentage>`
Standardwert	`0`
Animierbar	Ja

Hinweis:Die x-Achsen-Koordinate des Mittelpunkts des<ellipse> kann auch mit dercxGeometrie-Eigenschaft definiert werden. Wenn in CSS festgelegt, überschreibt dercx-Eigenschaftswert dencx-Attributwert.

radialGradient

Für<radialGradient> definiertcx die x-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 cx="0">      <stop offset="0%" stop-color="gold" />      <stop offset="50%" stop-color="green" />      <stop offset="100%" stop-color="white" />    </radialGradient>    <radialGradient cx="50%">      <stop offset="0%" stop-color="gold" />      <stop offset="50%" stop-color="green" />      <stop offset="100%" stop-color="white" />    </radialGradient>    <radialGradient cx="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>