<SVG>
<rect x = "10" y = "10" stroke = "noir" fill = "transparent" TRAD-width = "5" />
<rect x = "60" y = "10" rx = "10" ry = "10" stroke = "noir" fill = "transparent" TRAD-width = "5" />
<cercle cx = "25" cy = "75" r = "20" stroke = "red" fill = "transparent" TRAD-width = "5" />
<ellipse cx = "75" Cy = "75" rx = "20" ry = "5" stroke = "red" fill = "Transparent" TRAD-width = "5" />
<line x1 = "10" x2 = "50" y1 = "110" y2 = "150" rAME = "orange" fill = "transparent" TRAD-width = "5" />
<Points Polyline = "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke = "orange" fill = "Transparent" TRAD-width = "5" />
<Polygon Points = "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke = "green" fill = "Transparent" TRAD-width = "5" />
<Path D = "M20,230 Q40,205 50 230 T90,230" Fill = "None" Stroke = "Blue" TRAD-Width = "5" />
</svg>
Les résultats affichés dans ce HTML sont les suivants:
Cet exemple tire de nombreuses formes: rectangles normaux, rectangles arrondis, cercles, ellipses, lignes droites, polygones et chemins. Ce sont tous des éléments graphiques de base. Bien qu'il existe de nombreuses façons de dessiner un graphique, comme RECT peut être implémenté à l'aide de RECT ou PATH, nous devons toujours essayer de garder le contenu de SVG court et concis et facile à lire .
Vous trouverez ci-dessous les instructions pour utiliser chaque forme (il n'y a que les propriétés de base qui contrôlent la forme et la position de la figure, et les propriétés telles que le remplissage sont résumées ultérieurement).
Rectangle - élément rect Cet élément a 6 propriétés qui contrôlent les positions et les formes, à savoir:X: La valeur X des coordonnées (système de coordonnées utilisateur) du coin supérieur gauche du rectangle.
Y: la valeur y des coordonnées (système de coordonnées utilisateur) du coin supérieur gauche du rectangle.
Largeur: largeur rectangle.
hauteur: hauteur rectangulaire.
RX: Lorsque l'effet d'angle arrondi est atteint, le rayon du coin arrondi le long de l'axe x.
Ry: Lors de la réalisation de l'effet d'angle arrondi, le rayon du coin arrondi le long de l'axe y.
Par exemple, dans l'exemple ci-dessus, l'effet d'angle arrondi est obtenu, et vous pouvez également atteindre l'effet d'angle d'ellipse en définissant Rx et Ry sur différentes valeurs.
Cercle - Élément de cercle Les propriétés de cet élément sont simples, principalement pour définir le centre et le rayon:R: Le rayon du cercle.
CX: valeur x de la coordonnée centrale.
CY: la valeur y de la coordonnée centrale du cercle.
Ellipse - élément ellipse Il s'agit d'un élément circulaire plus général. Vous pouvez contrôler les longueurs de l'axe semi-majeur et de l'axe semi-majeur respectivement pour obtenir différents ellipses. Il est facile de penser que lorsque les deux semi-axes sont égaux, c'est un cercle parfait.RX: axe demi-major (x rayon).
Ry: axe semi-short (y-radius).
CX: valeur x de la coordonnée centrale.
CY: la valeur y de la coordonnée centrale du cercle.
Ligne - élément de ligne Une ligne droite doit définir le point de départ et le point final:x1: point de départ x coordonnée.
Y1: Le point de départ y coordonne.
x2: coordonnée du point final x.
Y2: Le point final y coordonne.
Polyline - élément de polyligne Les Polylines ont principalement besoin de définir les points d'extrémité de chaque segment de ligne, donc seul l'ensemble d'un point est requis comme paramètres:Points: Une série de points séparés par des espaces, des virgules, des nouvelles lignes, etc. Chaque point doit avoir 2 nombres: valeur x et valeur y. Ainsi, les 3 points suivants (0,0), (1,1) et (2,2) peuvent être écrits comme: 0 0, 1 1, 2 2.
Polygone - élément polygone Cet élément est de faire une étape de plus que l'élément polyligne, de connecter le dernier point et le premier point pour former une figure fermée. Les paramètres sont les mêmes.Points: Une série de points séparés par des espaces, des virgules, des nouvelles lignes, etc. Chaque point doit avoir 2 nombres: valeur x et valeur y. Ainsi, les 3 points suivants (0,0), (1,1) et (2,2) peuvent être écrits comme: 0 0, 1 1, 2 2.
Path - élément de chemin C'est l'élément le plus général et le plus puissant; En utilisant cet élément, vous pouvez implémenter n'importe quelle autre figure, non seulement les formes de base ci-dessus, mais aussi des formes complexes comme la courbe Bezier; De plus, l'utilisation du chemin peut obtenir des segments de transition en douceur. Bien que la polyligne puisse également être utilisée pour réaliser cet effet, il existe de nombreux points qui doivent être fournis et l'effet n'est pas bon s'il est amplifié. Cet élément contrôle la position et la forme avec un seul paramètre:D: Une série d'instructions de dessin et de paramètres de dessin (points).
Les instructions de dessin sont divisées en deux types: instructions de coordonnées absolues et instructions de coordonnées relatives. Les lettres utilisées dans ces deux instructions sont les mêmes, c'est-à-dire que la partie supérieure et les minuscules est différente. Les instructions absolues utilisent des lettres majuscules et les coordonnées sont également des coordonnées absolues; Les instructions relatives utilisent des lettres minuscules correspondantes et les coordonnées des points représentent les décalages.
Instruction de dessin de coordonnées absolues Les paramètres de cet ensemble d'instructions représentent des coordonnées absolues. En supposant que la brosse actuelle est située à (x0, y0), l'instruction de coordonnées absolues suivante représente le sens comme suit:| instruction | paramètre | illustrer |
| M | xy | Déplacez la brosse vers le point (x, y) |
| L | xy | Le pinceau tire le segment de ligne du point actuel au point (x, y) |
| H | x | Le pinceau dessine le segment de ligne horizontale du point actuel au point (x, y0) |
| V | y | Le pinceau dessine le segment de ligne verticale du point actuel au point (x0, y) |
| UN | RX RY X-AXIS-ROTATION | La brosse tire un arc du point actuel au point (x, y) |
| C | x1 y1, x2 y2, xy | Le pinceau dessine une courbe de Bezier cubique du point actuel au point (x, y) |
| S | x2 y2, xy | Version spéciale de la courbe Cubic Bezier (le premier point de contrôle est omis) |
| Q | x1 y1, xy | Dessinez une courbe de Bezier quadratique à pointer (x, y) |
| T | xy | Version spéciale de la courbe quadratique Bezier (points de contrôle omis) |
| Z | Aucun paramètre | Dessinez une figure fermée, et si l'attribut D ne spécifie pas la commande z, dessinez le segment de ligne au lieu de la figure entorante. |
Déplacez la commande Brush M, dessinez la commande Line: L, H, V et Fermer la commande z sont toutes relativement simples; Ce qui suit est l'accent mis sur les quelques instructions pour dessiner la courbe. Instruction de dessin à l'arc: un rx ry x-axe rotation à grande échelle sweep-plag xy
Il est plus compliqué de connecter 2 points avec un arc, et il existe de nombreuses situations, donc cette commande a 7 paramètres, qui contrôlent chaque attribut de la courbe. Ce qui suit explique la signification de la valeur numérique:
Rx, Ry est la longueur de l'axe semi-majeur et de l'axe semi-raccourci de l'arc
La rotation de l'axe x est l'angle entre l'axe x et la direction horizontale où cet arc est situé, c'est-à-dire l'angle de rotation dans le sens antihoraire de l'axe x, et le nombre négatif représente l'angle de rotation dans le sens horaire.
Le drapeau à grand arc est 1 pour représenter un arc à grand angle et 0 pour représenter un arc à petit angle.
Flag de balayage est 1, ce qui représente l'arc du point de départ au point d'extrémité dans le sens horaire autour du centre, et 0 représente la direction dans le sens antihoraire.
x, y sont les coordonnées terminales de l'arc.
Je ne parlerai pas des deux premiers paramètres et des deux derniers paramètres, c'est très simple; Parlons des trois paramètres au milieu:
La rotation de l'axe x représente l'angle de rotation et découvre les différences d'arcs dans l'exemple suivant:
<SVG>
<chemin D = "M10 315
L 110 215
A 30 50 0 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10 "TRAD =" Black "Fill =" Green "TRAD-Width =" 2 "Fill-Opacity =" 0,5 "/>
</svg>
Le HTML ci-dessus dessine la figure suivante:
D'après la figure, nous pouvons voir que les différents paramètres de rotation de l'ellipse conduisent à différentes directions de l'arc dessiné. Bien sûr, ce paramètre n'a aucun effet sur le cercle parfait.
Le grand drapeau à arc et le plateau de balayage contrôlent la taille et la direction de l'arc, et connaissez les différences dans l'arc dans l'exemple suivant:
<SVG>
<chemin D = "M80 80
A 45 45, 0, 0, 0, 125 125
L 125 80 Z "Fill =" Green "/>
<chemin D = "M230 80
A 45 45, 0, 1, 0, 275 125
L 275 80 Z "FILL =" Red "/>
<chemin D = "M80 230
A 45 45, 0, 0, 1, 125 275
L 125 230 Z "FILL =" Purple "/>
<chemin D = "M230 230
A 45 45, 0, 1, 1, 275 275
L 275 230 Z "FILL =" BLUE "/>
</svg>
Ce HTML dessine les images suivantes:
À partir de ce qui précède, nous pouvons voir que ces paramètres sont en fait les seuls paramètres nécessaires pour déterminer une section d'arc. On voit également ici que les arcs de SVG sont plus compliqués que ceux de toile.
Dessin CUBIC BEZIER CURVE INSTRUCTIONS: C X1 Y1, X2 Y2, XYIl y a deux points de contrôle dans la courbe de Bezier cubique, à savoir (x1, y1) et (x2, y2), et le dernier (x, y) représente le point final de la courbe. Découvrez les exemples suivants:
<SVG>
<chemin D = "M10 10 C 20 20, 40 20, 50 10" TRAD = "Black" Fill = "Transparent" />
<chemin D = "M70 10 C 70 20, 120 20, 120 10" TRAD = "Black" Fill = "Transparent" />
<chemin D = "M130 10 C 120 20, 180 20, 170 10" TRAD = "Black" Fill = "Transparent" />
<chemin D = "M10 60 C 20 80, 40 80, 50 60" TRAD = "Black" Fill = "Transparent" />
<chemin D = "M70 60 C 70 80, 110 80, 110 60" TRAD = "Black" fill = "transparent" />
<chemin D = "M130 60 C 120 80, 180 80, 170 60" TRAD = "Black" fill = "transparent" />
<chemin D = "M10 110 C 20 140, 40 140, 50 110" TRAD = "Black" Fill = "Transparent" />
<chemin D = "M70 110 C 70 140, 110 140, 110 110" TRAD = "Black" Fill = "Transparent" />
<chemin D = "M130 110 C 120 140, 180 140, 170 110" TRAD = "Black" Fill = "Transparent" />
</svg>
Cet extrait HTML dessine la figure suivante:
À partir de ce qui précède, nous pouvons voir que le point de contrôle contrôle le radian de la courbe.
Version spéciale de Cubic Bezier Curve: SX2 Y2, XYPlusieurs fois, afin de dessiner une courbe lisse, il est nécessaire de dessiner la courbe en continu plusieurs fois. À l'heure actuelle, afin de lisser la transition, le point de contrôle de la deuxième courbe est souvent le point de mappage du premier point de contrôle de la courbe de l'autre côté de la courbe. Cette version simplifiée peut être utilisée pour le moment. Il convient de noter ici que s'il n'y a pas d'autres instructions S ou C devant l'instruction S, les deux points de contrôle seront considérés comme les mêmes et dégénérés dans la courbe de Bezier quadratique; Si l'instruction S est utilisée après une autre instruction S ou C, le premier point de contrôle de l'instruction S suivante sera défini par défaut sur un point de mappage du deuxième point de contrôle de la courbe précédente. Faisons l'expérience:
<SVG>
<chemin D = "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" TRAD = "Black" Fill = "Transparent" />
</svg>
Ce fragment HTML est dessiné comme suit:
L'instruction S ci-dessus n'a qu'un deuxième point de contrôle, et le premier point de contrôle utilise un point de mappage du deuxième point de contrôle de l'instruction de courbe précédente.
Dessin Quadratic Bezier Curve Instructions: QX1 Y1, XY, T XY (version spéciale de la courbe quadratique de Bezier) La courbe de Bezier quadratique n'a qu'un seul point de contrôle (x1, y1), qui est généralement illustré dans la figure ci-dessous:Si vous dessinez une courbe en continu, vous pouvez également utiliser la version simplifiée T. De même, lorsque T est uniquement avant les commandes Q ou T, le point de contrôle de la commande T suivante sera défini sur le point de mappage du point de contrôle de la courbe précédente par défaut. Faisons l'expérience:
<SVG>
<chemin D = "M10 80 Q 52,5 10, 95 80 T 180 80" TRAD = "Black" Fill = "Transparent" />
</svg>
Ce fragment HTML est dessiné comme suit:
De même, si la commande t n'est pas précédée par la commande q ou t, il est considéré qu'il n'y a pas de point de contrôle et que la ligne dessinée est une ligne droite.
Instruction de dessin de coordonnées relatives Les lettres de l'instruction de dessin de coordonnées absolues sont les mêmes, sauf qu'elles sont toutes minuscules. Les paramètres impliqués dans les coordonnées dans les paramètres de cet ensemble d'instructions représentent des coordonnées relatives, ce qui signifie que les paramètres représentent le décalage du point actuel au point cible, un nombre positif représente le décalage positif de l'axe, et un nombre négatif représente le décalage inverse. Cependant, pour les instructions Z, il n'y a pas de différence dans le cas.Il convient de noter ici que des instructions de coordonnées absolues et des instructions de coordonnées relatives peuvent être utilisées de manière mixte . Parfois, une utilisation mixte peut conduire à des méthodes de dessin plus flexibles.
Notes sur le dessin du chemin SVG: Lorsque vous dessinez une silhouette avec des trous, vous devez faire attention: Le dessin des bords extérieurs doit être dans le sens antihoraire, et l'ordre des bords des trous à l'intérieur doit être dans le sens horaire. Seul l'effet de remplissage graphique dessiné de cette manière sera correct. Référence pratique:Index du script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Centre de développement: https://developer.mozilla.org/en/svg
Référence populaire: http://www.chinasvg.com/
Document officiel: http://www.w3.org/tr/svg11/