cx

Das cx-Attribut definiert die x-Achsen-Koordinate eines Mittelpunktes.

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

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

Beispiel

html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cx="25%" id="myGradient">
    <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> definiert cx 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 der cx Geometrie-Eigenschaft definiert werden. Wenn sie in CSS festgelegt ist, überschreibt der cx-Eigenschaftswert den cx-Attributwert.

ellipse

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

Wert <length-percentage>
Standardwert 0
Animierbar Ja

Hinweis: Die x-Achsen-Koordinate des Mittelpunkts der <ellipse> kann auch mit der cx Geometrie-Eigenschaft definiert werden. Wenn sie in CSS festgelegt ist, überschreibt der cx-Eigenschaftswert den cx-Attributwert.

radialGradient

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

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

    <radialGradient cx="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
# RadialGradientElementCXAttribute

Browser-Kompatibilität

svg.elements.circle.cx

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
cx

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

svg.elements.ellipse.cx

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
cx

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

svg.elements.radialGradient.cx

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
cx

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch