it-swarm.com.de

Kann mir jemand die SVG-Polygonpunkte erklären?

Ich muss SVG-Polygonpunkte kennen, wie das funktioniert. Kann jemand eine klare Erklärung oder andere Links geben, wo ich eine klare Erklärung bekommen kann.

Wenn möglich erklären, wie diese Polygonpunkte intern funktionieren, meine ich, welchen Algorithmus es verwendet hat?

 <svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:Lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

Update: Die Hauptabsicht hinter dieser Frage ist, wie ein Polygon die Punkteattribute aufnimmt und wie es im Browser als Polygon dargestellt wird.

12
kernal lora

Die Variable polygon enthält eine Liste von points (ref here ), die die X- und Y-Koordinaten jedes Paares sind.

In Ihrem Beispiel haben Sie

points="100,10 40,198 190,78 10,78 160,198"

Dies sind fünf "Ecken", die bei (100,10) beginnen, mit einer Linie von dort bis (40, 198) und so weiter. Der letzte Punkt verbindet den ersten Punkt zu einem geschlossenen Polygon.

Die Dokumente sagen uns "Jeder Punkt wird durch eine X- und eine Y-Koordinate im Benutzerkoordinatensystem definiert." Die Einheiten sind Pixel, und "Das ursprüngliche Ansichtsfensterkoordinatensystem (und damit das anfängliche Benutzerkoordinatensystem) hat seinen Ursprung oben links im Ansichtsfenster. Die positive X-Achse zeigt nach rechts, das Positive." y-achse nach unten "(von hier )

Also ist 100, 10 100 Pixel rechts und 10 nach unten.

16
doctorlove

Mit dem Element wird eine Grafik erstellt, die mindestens drei Seiten enthält. Polygone bestehen aus geraden Linien und die Form ist "geschlossen" (alle Linien verbinden sich). Sie sehen einige Beispiele hier

0
fernando