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

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

View in English Always switch to English

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 in CSS festgelegt, ü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 des <ellipse> kann auch mit der cx Geometrie-Eigenschaft definiert werden. Wenn in CSS festgelegt, ü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

svg.elements.ellipse.cx

svg.elements.radialGradient.cx

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