SVG - Chemin
L'élément <path> est utilisé pour dessiner des lignes droites connectées.
Déclaration
Voici la déclaration de syntaxe de <path>élément. Nous n'avons montré que les principaux attributs.
<path
d="data" >
</path>Les attributs
| Sr.No. | Nom et description |
|---|---|
| 1 | d - données de chemin, généralement un ensemble de commandes comme moveto, lineto, etc. |
L'élément <path> est utilisé pour définir n'importe quel chemin. L'élément Path utilise des données Path qui comprennent un certain nombre de commandes. Les commandes se comportent comme une pincée de crayon ou un pointeur se déplace pour dessiner un tracé.
| Sr.No. | Commande et description |
|---|---|
| 1 | M - moveto - se déplace d'un point à un autre point. |
| 2 | L - lineto - crée une ligne. |
| 3 | H - ligne horizontale - créer une ligne horizontale. |
| 4 | V - ligne verticale - créer une ligne verticale. |
| 5 | C - curveto - créer une courbe. |
| 6 | S - curveto lisse - créer une courbe lisse. |
| sept | Q - courbe de Bézier quadratique - crée une courbe de Bézier quadratique. |
| 8 | T - curveto de Bézier quadratique lisse - créer une courbe de Bézier quadratique lisse |
| 9 | A - Arc elliptique - crée un arc elliptique. |
| dix | Z - closepath - ferme le chemin. |
Comme les commandes ci-dessus sont en majuscules, elles représentent le chemin absolu. Dans le cas où leurs commandes en minuscules sont utilisées, le chemin relatif est utilisé.
Exemple
testSVG.htm<html>
<title>SVG Path</title>
<body>
<h1>Sample SVG Path Image</h1>
<svg width="570" height="320">
<g>
<text x="0" y="10" fill="black" >Path #1: Without opacity.</text>
<path d="M 100 100 L 300 100 L 200 300 z"
stroke="black" stroke-width="3" fill="rgb(121,0,121)"> </path>
</g>
</svg>
</body>
</html>Dans l'exemple ci-dessus, dans la première forme, M 100 100 déplace le pointeur de dessin sur (100,100), L 300 100 trace une ligne de (100,100) à (300,100), L 200 300 trace une ligne de (300,100) à (200,300) et z ferme le chemin.
Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.
Chemin avec opacité
<html>
<title>SVG Path</title>
<body>
<h1>Sample SVG Path Image</h1>
<svg width="800" height="800">
<g>
<text x="0" y="15" fill="black" >Path #2: With opacity </text>
<path d="M 100 100 L 300 100 L 200 300 z"
style="fill:rgb(121,0,121);stroke-width:3;
stroke:rgb(0,0,0);stroke-opacity:0.5;"> </path>
</g>
</svg>
</body>
</html>Production
Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.