L'utilisation d'éléments dans svg et l'introduction d'attributs de marqueur

Les graphiques dessinés à l'aide de SVG sont des flèches, qui peuvent être définies dans et puis réutilisées, mais vous devez les déplacer ou les faire pivoter à chaque fois que vous les appliquez. Il serait beaucoup plus pratique d'utiliser directement un élément

Élément

Un marqueur est un élément qui peut relier les sommets d'un ou plusieurs chemins, lignes, polylignes ou polygones Type de drapeau. Le cas d'utilisation le plus courant consiste à dessiner des flèches ou à marquer un graphique (polymarqueur) sur la ligne du résultat de sortie.
Utilisez l'élément pour créer un marqueur et ses attributs associés. Habituellement, nous plaçons le marqueur dans l'élément , puis nous le référençons ailleurs. Apprenons à travers un exemple simple. Les propriétés MarkerWidth et MarkerHeight définissent la largeur et la hauteur de la fenêtre du marqueur.

<svg width="600px" height="100px"> 
    <defs> 
    <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth"> <path d="M0,0 L0,6 L9,3 z" fill="#f00" /> 
    </marker>
    </defs> 
    <line x1="50" y1="50" x2="250" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" />
</svg>

Dans l'exemple ci-dessus, j'ai défini à la fois MarkerWidth et MarkerHeight sur 10px. Le triangle dessiné dans le chemin doit s'insérer dans la zone 9px x 6px, je peux donc également définir le MarkerWidth sur 9 et le MarkerHeight sur 6. Il s'agit de la taille minimale que le marqueur peut accepter. Toute taille inférieure à celle-ci entraînera le recadrage du graphique.

Les deux attributs suivants, refX et refY, font référence aux coordonnées de position de la connexion entre l'élément graphique et le marqueur. Nous avons également appliqué une transformation à la scène située derrière pour déplacer le marqueur et l'aligner avec lui. L'attribut suivant est l'orientation. Cet attribut est la raison pour laquelle je n'ai pas besoin d'ajuster le marqueur lors de la conversion de la direction de la ligne. Il accepte une valeur automatique, ou une valeur d'angle, qui détermine si le marqueur doit être pivoté lorsqu'il est connecté à un autre contenu. auto Cette valeur signifie que le marqueur tournera avec les éléments appliqués. La valeur 45deg signifie que la direction du marqueur reste toujours de 45deg et ne tournera pas avec les éléments connectés. La plupart du temps, cette valeur est définie sur auto.

Le dernier attribut est MarkerUNits, qui est utilisé pour déterminer si le marqueur est mis à l'échelle. Il définit MarkerWidth et MarkerHeight, ainsi que le système de coordonnées du contenu du marqueur lui-même.

Il accepte deux valeurs, StrokeWidth et userSpaceOnUse. La valeur par défaut est StrokeWidth, ce que vous définirez dans la plupart des cas car elle permet à votre marqueur de s'adapter à la ligne à laquelle il est connecté.

StrokeWidth : La valeur du marqueur dans le système de coordonnées et l'unité de la largeur actuelle du trait ont la même taille. En d’autres termes, la valeur StrokeWidth permet de mettre à l’échelle votre marqueur.

userSpaceOnUse : La valeur du marqueur est la valeur du système de coordonnées utilisateur actuel. C'est-à-dire que si votre marqueur est un cercle de rayon 10px, il aura toujours un rayon de 10px, quels que soient les éléments connectés.

Fonction de marqueur – référencer des marqueurs dans des éléments

Il existe quatre façons d'appliquer des marqueurs à des graphiques de base tels que des lignes, des chemins, des polylignes et des polygones :

marker-start=”url(#marker-id)”

marker-end="url(#arrow)”

marker-mid=”url(#marker-id)”

• marker-end=”url(#marker-id)”

• marker=”url(#marker-id)”

• Articles connexes recommandés :
  Comment SVG implémente la transformation du système de coordonnées (avec code)

• Un résumé des différentes méthodes d'utilisation de SVG dans React (avec code ci-joint) Code)

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!