chemin SVG
SVG path - <path>
<Path> est utilisé pour définir un chemin.
La commande suivante peut être utilisée pour les données de l'itinéraire:
- M = moveto
- L = lineto
- H = lineto horizontal
- V = lineto vertical
- C = curveto
- S = curveto lisse
- Q = courbe de Bézier quadratique
- T = lisse quadratique curveto Bézier
- A = arc elliptique
- Z = closepath
Remarque: Toutes les commandes ci - dessus permettent des lettres minuscules. Capital représente le positionnement absolu, le positionnement par rapport indique en minuscules.
exemple 1
L'exemple ci-dessus définit un chemin qui commence à la position 1500, la position 75200 atteinte, puis de là à 225 200 en 1500, et le chemin finalement fermé.
Voici le code SVG:
Exemples
<Chemin d = "M150 0 L75 200 L225 200 Z" />
</ Svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
exemple 2
Utilisation de courbe de Bézier modèle de courbe lisse qui peut être mise à l'échelle indéfiniment. Dans des circonstances normales, l'utilisateur sélectionne un ou deux points d'extrémité et les deux points de contrôle. Un point d'une courbe de Bézier qui est appelé une courbe de Bézier quadratique et les deux points de contrôle commande sont appelés cubes.
L'exemple suivant crée une courbe de Bézier quadratique, A et C sont les points de départ et de fin, B est un point de contrôle:
Voici le code SVG:
Exemples
<Path id = d "lineAB" = "M 100 350 l 150 -300" stroke = "red"
stroke-width = "3" fill = "none" />
<Path id = d "lineBC" = "M 250 50 l 150 300" stroke = "red"
stroke-width = "3" fill = "none" />
<Chemin d = "M 175 200 l 150 0" stroke = stroke-width "vert" = "3"
fill = "none" />
<Chemin d = "M 100 350 q 150 -300 300 0" stroke = "blue"
stroke-width = "5" fill = "none" />
<! - Marquer les points pertinents ->
<G stroke = stroke-width "noir" = "3" fill = "black">
<Cercle id = "Pointa" cx = "100" cy = "350" r = "3" />
<Cercle id = "pointB" cx = "250" cy = "50" r = "3" />
<Cercle id = "pointC" cx = "400" cy = "350" r = "3" />
</ G>
<! - Marquez des points ->
<G font-size = police "30" = "sans-serif" fill = course "noir" = "none"
text-anchor = "middle">
<Texte x = "100" y = "350" dx = "- 30"> A </ text>
<Texte x = "250" y = "50" dy = "- 10"> B </ text>
<Text x = "400" y = "350" dx = "30"> C </ text>
</ G>
</ Svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
Compliqué? Oui! ! Parce que lors de l'élaboration de la complexité du chemin, il est fortement recommandé d'utiliser l'éditeur SVG pour créer des graphiques complexes.