Quel est l'attribut PathLength dans SVG? Quelles sont ses applications pratiques?

Propriété pathLength de SVG: Contrôle flexible de la longueur du chemin

Bien que la propriété pathLength dans SVG semble simple, elle peut atteindre des fonctions puissantes, en particulier dans l'animation et le contrôle précis des positions de point de chemin. Cet article explorera en profondeur les méthodes d'utilisation et d'utilisation de pathLength .

Fonctions de l'attribut pathLength

La propriété pathLength vous permet de personnaliser le chemin SVG (<path></path> ) longueur. Cette longueur peut être n'importe quelle valeur, généralement proportionnelle à la longueur réelle du chemin. En définissant cette propriété, vous pouvez contrôler plus précisément les coordonnées des points sur le chemin, réalisant ainsi des effets complexes d'animation et de dessin.

Comment utiliser l'attribut pathLength

Supposons que vous ayez un élément de chemin SVG:

<svg height="100" width="100">
  <path d="M10 10 L90 90" fill="none" pathlength="10" stroke="black"></path>
</svg>

Ce code définit la longueur du chemin vers 10 unités. Quelle que soit la longueur géométrique réelle du chemin, pathLength le normalise à la valeur spécifiée.

Cas de candidature pratiques

L'exemple suivant montre comment pathLength contrôle les points sur un chemin:

<svg height="100" width="100">
  <path d="M10 10 L90 90" fill="none" pathlength="100" stroke="black"></path>
  <circle cx="10" cy="10" fill="red" r="2"></circle> 
  <circle cx="50" cy="50" fill="blue" r="2"></circle> 
</svg>

Ici, la longueur du chemin est réglée à 100. Le cercle rouge indique le point de départ, tandis que le cercle bleu est situé à 50% du chemin. En modifiant pathLength , vous pouvez ajuster avec précision les coordonnées de n'importe quel point sur le chemin.

Application avancée: animation

pathLength joue un rôle clé dans l'animation. Par exemple, vous pouvez créer une animation qui se déplace le long du chemin:

<svg height="100" width="100">
  <path d="M10 10 L90 90" fill="none" id="myPath" pathlength="100" stroke="black"></path>
  <circle fill="red" r="2">
    <animatemotion dur="5s" repeatcount="indefinite">
      <mpath xlink:href="https://www.php.cn/link/f9915a71fed113978ef38aca492f4753"></mpath>
    </animatemotion>
  </circle>
</svg>

Dans cet exemple, le cercle rouge se déplacera le long du chemin, la période d'animation est de 5 secondes et la lecture sera bouclée. pathLength assure un contrôle précis de la vitesse et de la position d'animation.

Résumé: L'attribut pathLength donne des chemins SVG extrêmement élevés, ce qui leur donne de larges prospects d'application dans l'animation et le dessin précis. La compréhension et l'application de cet attribut peuvent considérablement améliorer l'expressivité des graphiques SVG.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!