« Découvrir le SVG/Manipulations avancées » : différence entre les versions

Contenu supprimé Contenu ajouté
Ligne 223 :
* <code>refX</code> et <code>refY</code> décalent la fenêtre de ses demi-dimensions afin qu'elle soit centrée sur l'extrémité de la ligne.
Le cercle est ensuite placé au centre de la fenêtre et son rayon est choisi pour qu'il soit inscrit dans la fenêtre ; si l'on trace le périmètre (on définit une couleur par le paramètre <code>stroke</code>), il faut ajuster le rayon pour que l'épaisseur du trait soit contenue dans la fenêtre.
 
Le code suivant permet de placer des traits d'arrêt perpendiculaires à la ligne :
<source lang="xml">
<marker
id="extremiteDeLigne"
markerWidth="1" markerHeight="10"
refX="0.5" refY="5"
orient="auto"
>
<line
x1="0.5" y1="0" x2="0.5" y2="10"
stroke="black" fill="none"
/>
</marker>
 
<path
d="M10 50
Q50 10, 75 50"
marker-start="url(#extremiteDeLigne)"
marker-mid="url(#extremiteDeLigne)"
marker-end="url(#extremiteDeLigne)"
stroke="black" stroke-width="1" fill="none"
/>
</source>
Nous avons utilisé l'attribut <code>orient="auto"</code> qui permet d'aligner les axes du repère de la fenêtre du marqueur avec la direction locale de la ligne. On peut à la place indiquer une valeur numérique, il s'agit alors de l'angle duquel est tournée la fenêtre par rapport au la page (et non pas par rapport à la direction de la courbe).
 
Mentionnons un dernier attribut :
 
=== Dégradés de couleurs ===