S'il vous plaît expliquer les commandes Path SVG et coordonnées

Question

Dans un fichier SVG, je l'ai trouvé un chemin qui ressemble à ceci:

<path id="kvg:0548b-s7" kvg:type="㇐b" d="M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13"/> 

quelqu'un peut-il expliquer ce que les coordonnées 48.38c5.65-0.95 et 18.92-3.42c2.05-0.45 représentent?

Answer 1

Je pense qu'une partie de la confusion provient des astuces que le format permet de séparer des paramètres individuels aux divers opérandes de chemin. Ainsi, dans l'exemple:

M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13

Vous voyez paramètres

• séparés par des virgules comme dans M (ove) 65.32,48.38 ...
• séparés par des traits d'union (signe moins) comme dans c (UBIC Bézier) 2,05 à 0,45 ...
• délimitée par nouveaux opérandes comme dans ... 48.38c5.65 ...
• vous verrez aussi des paramètres délimités par des espaces blancs au lieu de virgules
• vous pouvez même voir les paramètres d'une période délimitée si le paramètre de premier plan précédent avait une période, il
• Parfois, vous verrez les paramètres en notation scientifique en 3.22e-9 pour éliminer les zéros

Comme chaque type d'opérande nécessite exactement un certain nombre de paramètres (M, L, T ont besoin de 2; H, V besoin de 1; Q, S ont besoin de 4; C a besoin de 6; Un besoin 7; et Z a besoin de 0) vous verrez des situations où les opérandes sont omis. Si vous voyez un L avec 4 paramètres après cela, cela signifie en réalité 2 lignes, un C avec 18 paramètres après cela signifie 3 Béziers cubiques.

Ceci est tout pour minimiser l'espace perdu dans le SVG, et pas seulement pour le rendre difficile à lire.

Answer 2

L'attribut d d'une balise <path> de SVG contient une série d'instructions ou de descriptions qui sont traitées pour créer la forme globale du SVG. Ces instructions peuvent être de différents types:

1. Déplacerpour :: restart le chemin un autre endroit (M ou m syntaxe)
2. Lineto :: tracer une ligne droite (ou Ll syntaxe ou H et V ou h et v)
3. curveTo :: tracer une courbe de Bézier cubique (C ou syntaxe c)
4. arcto :: dessiner une courbe elliptique (A ou a syntaxe)
5. closepath :: tracer une ligne droite jusqu'au point d'ouverture de la voie (ou Zz syntaxe)

La syntaxe des majuscules signifie que les valeurs de position absolues sont indiquées. La syntaxe en minuscules signifie que les valeurs de position relatives sont les mêmes, ce qui signifie que la coordonnée suivante est trouvée en bas et à droite du point de contrôle actuel.

Les instructions fournies dans l'attribut d pour votre fichier SVG commencent par une majuscule M, qui correspond aux valeurs de position absolues d'une commande Moveto. Mais il existe également des commandes c en minuscules, qui signifient des valeurs relatives pour un jeu d'instructions Curveto.

En ce qui concerne le premier coordonnées demandez à propos ...

Moveto commandes ont deux arguments. Dans le premier segment de la première valeur que vous recherchez, 48.38 est le paramètre d'axe y (qui suit le paramètre x de 65.32) pour la commande Moveto. Le reste c5.65-0.95 est le début d'un nouvel ensemble d'instructions Curveto.

Curveto commandes ont trois arguments, constitués de x et y paires, chacune étant séparée par un tiret (-). Comme il est donné avec une minuscule c, les valeurs qui suivent sont relatives. La première paire est le point de contrôle qui commence la courbe, le second est le point de contrôle qui termine la courbe et le troisième est la coordonnée qui définit le point courant à partir duquel la courbe commence.

En ce qui concerne le deuxième ensemble de coordonnées que vous posez sur ...

Le 18,92 à 3,42 est le point courant (troisième argument) définie par la première commande Curveto, et le c2.05-0.45 est premier argument de la commande suivante Curveto qui commande le début de la courbe de Bézier .

Les points, dans ces valeurs, sont des points décimaux.

Si vous prenez l'attribut d et le divisez, selon le nombre d'arguments définis dans la documentation, par commande, le jeu d'instructions devient much more readable.

Pour plus d'informations sur l'attribut d, see here et here.

Pour plus d'informations sur les courbes de Bézier, see here.