points

Das Attribut points definiert eine Liste von Punkten. Jeder Punkt wird durch ein Zahlenpaar definiert, das eine X- und eine Y-Koordinate im Benutzerkoordinatensystem angibt. Enthält das Attribut eine ungerade Anzahl von Koordinaten, wird die letzte ignoriert.

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

polygon

Für <polygon> definiert points eine Liste von Punkten, die jeweils einen Eckpunkt der zu zeichnenden Form darstellen. Jeder Punkt wird durch eine X- und eine Y-Koordinate im Benutzerkoordinatensystem definiert.

Hinweis: Ein Polygon ist eine geschlossene Form. Das bedeutet, dass der letzte Punkt mit dem ersten verbunden ist.

Wert	[ `<number>`+ ]#
Standardwert	keiner
Animierbar	Ja

polyline

Für <polyline> definiert points eine Liste von Punkten, die jeweils einen Eckpunkt der zu zeichnenden Linie darstellen. Jeder Punkt wird durch eine X- und eine Y-Koordinate im Benutzerkoordinatensystem definiert.

Hinweis: Eine Polylinie ist eine offene Form. Das bedeutet, dass der letzte Punkt nicht mit dem ersten verbunden ist.

Wert	[ `<number>`+ ]#
Standardwert	keiner
Animierbar	Ja

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

html

<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline is an open shape -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>

Beispiele

Verwendung mit polyline

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

html

<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline is an open shape -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />

  <!-- polygon is a closed shape -->
  <polygon
    stroke="black"
    fill="none"
    transform="translate(100,0)"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  It is usually considered best practices to separate a X and Y
  coordinate with a comma and a group of coordinates by a space.
  It makes things more readable for human beings.
  -->
</svg>

Verwendung mit polygon

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

html

<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polygon is a closed shape -->
  <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # PolygonElementPointsAttribute
Scalable Vector Graphics (SVG) 2 # PolylineElementPointsAttribute

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden