Le meilleur didacticiel Les propriétés de liseré SVG en 2024, dans ce didacticiel, vous pouvez apprendre Les propriétés de liseré SVG,SVG propriété AVC,Exemples,stroke-width SVG attribut,Exemples,SVG propriété stroke-linecap,Exemples,SVG propriété stroke-dasharray,Exemples,

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

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<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

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<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

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<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

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<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).

Les propriétés de liseré SVG
10/30