web-dev-qa-db-fra.com

S'il vous plaît, quelqu'un peut-il expliquer les points de polygone SVG?

J'ai besoin de connaître les points polygonaux SVG et leur fonctionnement. Est-ce que n'importe qui peut donner une explication claire ou d'autres liens où je peux obtenir une explication claire?.

SI possible d'expliquer comment ces points polygonaux fonctionnent en interne, je veux dire quel algorithme il utilisait?

 <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>

Mise à jour: L'intention principale de cette question est de savoir comment le polygone prend les attributs de points et comment il est rendu dans le navigateur sous forme de polygone.

12
kernal lora

La polygon prend une liste de points (réf ici ) qui sont les coordonnées X et Y de chaque paire.

Dans votre exemple, vous avez

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

Il s'agit de cinq "coins" commençant à (100,10), avec une ligne allant de là à (40, 198), etc. Le dernier point rejoint le premier point pour créer un polygone fermé.

La documentation nous dit "Chaque point est défini par une coordonnée X et une coordonnée Y dans le système de coordonnées de l'utilisateur." Les unités sont des pixels et "le système de coordonnées initial de la fenêtre (et donc le système de coordonnées utilisateur initial) a son origine en haut/à gauche de la fenêtre, avec l'axe des x positif pointant vers la droite, le positif axe des y pointant vers le bas "(de ici )

Donc, 100, 10 est 100 pixels corrects et 10 bas.

16
doctorlove

L'élément est utilisé pour créer un graphique contenant au moins trois côtés. Les polygones sont constitués de lignes droites et la forme est "fermée" (toutes les lignes sont connectées). quelques exemples ici

0
fernando