Les propriétés de liseré SVG
Les propriétés de liseré SVG
SVG offre un large éventail d'attributs de trait. Dans ce chapitre, nous allons examiner ce qui suit:
- coup
- stroke-width
- stroke-linecap
- AVC-dasharray
Tous les attributs de contour peut être appliqué à tout type de lignes, du texte et des éléments comme un contour circulaire.
SVG propriété AVC
attribut Stroke définit une ligne, ou le texte élément couleur du contour:
Voici le code SVG:
Exemples
<G fill = "none">
<Chemin stroke = d "rouge" = "M5 20 L215 0" />
<Path course = d "bleu" = "M5 40 L215 0" />
<Path course = d "noir" = "M5 60 L215 0" />
</ G>
</ Svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
stroke-width SVG attribut
Tstroke- attributs largeur définissent une ligne, ou l'épaisseur du texte élément de contour:
Voici le code SVG:
Exemples
<G remplissage = "none" stroke = "black">
<Chemin stroke-width = "2" d = "M5 20 L215 0" />
<Chemin stroke-width = "4" d = "M5 40 L215 0" />
<Chemin stroke-width = "6" d = "M5 60 L215 0" />
</ G>
</ Svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
SVG propriété stroke-linecap
strokelinecap attribut définit l'extrémité d'un chemin ouvert de différents types:
Voici le code SVG:
Exemples
<G remplissage = "none" stroke = stroke-width "noir" = "6">
<Chemin stroke-linecap = "butt" d = "M5 20 L215 0" />
<Chemin stroke-linecap = "round" d = "M5 40 L215 0" />
<Chemin stroke-linecap = d "carré" = "M5 60 L215 0" />
</ G>
</ Svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).
SVG propriété stroke-dasharray
strokedasharray biens utilisés pour créer la ligne pointillée:
Voici le code SVG:
Exemples
<G remplissage = "none" stroke = stroke-width "noir" = "4">
<Path course-dasharray = "5,5" d = "M5 20 L215 0" />
<Path course-dasharray = "10,10" d = "M5 40 L215 0" />
<Path course-dasharray = "20,10,5,5,5,10" d = "M5 60 L215 0" />
</ G>
</ Svg>
Essayez »
Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).