Attribut stroke SVG

La propriété 'stroke' définit la couleur du contour extérieur d'un élément graphique donné. Sa valeur par défaut est 'none'.

　Les attributs couramment utilisés incluent :

1. stroke-width

2. stroke-linecap

3. stroke-linejoin

4. stroke-miterlimit

5. stroke-dasharray + stroke-dashoffset

6. stroke-opacity

Attributs de style

Les attributs de style stroke et fill de CSS spécifient les propriétés internes des formes SVG. Voici un exemple :

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<circle　cx="50"　cy="50"　r="50"　style="stroke:　#000066;　fill:　3333ff;"　/>
</svg>

Dans cet exemple, un cercle avec une couleur de trait bleue plus foncée et une couleur de remplissage bleue plus claire.

Exemple de trait

Le trait des formes SVG est le contour de la forme. Voici un exemple de trait SVG :

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

Dans cet exemple, un cercle avec une couleur de trait noire (#000000) et sans remplissage. Effet d'image après exécution :

Exemple de coupe et de remplissage (Stroke & Fill)

Vous pouvez combiner les couleurs de trait et de remplissage de SVG pour former des formes SVG. Voici un exemple de stroke et de remplissage SVG :

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　#3333ff;"　/></svg>

Dans cet exemple, une couleur bleue plus foncée (#000066） avec une couleur de trait et une couleur bleue plus claire (#3333ff) avec un cercle de couleur de remplissage. Effet d'image après exécution :

stroke-width

SVG a stroke-width définit l'attribut CSS de largeur de la ligne. C'est un SVG stroke-Exemple de width :

stroke-width:　3px;

Dans cet exemple, la largeur de la ligne est définie sur3pixels. Vous pouvez utiliser des unités différentes des pixels. DansVoir toutes les unités disponibles dans le système de coordonnées SVG en unités.

Voici quatre exemples différents de stroke-width :

<svg　width="500"　height="120">
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　1px;"　/>
<circle　cx="150"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　3px;"　/>
<circle　cx="250"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　6px;"　/>
<circle　cx="350"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　12px;"　/>
</svg>

Effet visuel de l'image après exécution :

Coupe de ligne (stroke-linecap)

L'attribut CSS de SVG stroke-linecap définit comment la fin de la ligne SVG est représentée. L'attribut CSS stroke-linecap a trois valeurs possibles. Ce sont :

butt
square
round

Cette valeur crée un bouchon de ligne butt qui coupe précisément la fin de la ligne. Cette valeur fait que le bouchon de ligne square semble comme butt (coupe), mais sort légèrement au-delà de la fin de la ligne. Cette valeur fait que le bouchon de ligne round remplit la ligne.

Il y a trois SVG stroke-linecap montre ces trois exemples de stroke-La valeur de linecap (séquence = butt, square, round) :

Dans cet exemple, trois lignes vertes sont définies, dont a　stroke-largeur de10pour mieux expliquer stroke-La propriété CSS linecap dessine chaque ligne verte en noir avec stroke-largeur　que1Cette ligne a la même x1, y1et x2, y2coordonnées de la ligne verte, mais sans stroke-linecap ensemble. De cette manière, vous pouvez voir l'effet de différentes stroke-linecap　).

différences entre les valeurs de connexion de ligne (stroke-linejoin)

La propriété CSS stroke-linejoin définit comment la connexion entre deux lignes d'une forme est rendue. La propriété CSS stroke-linejoin peut adopter l'une des trois valeurs. Ces valeurs sont :

miter
round
bevel

Voici trois SVG　stroke-Exemple de linejoin, ils expliquent ces valeurs différentes :

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　miter;"　></path>
<text　x="22"　y="20">miter</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　round;"　></path>
<text　x="122"　y="20">round</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;stroke-width:16px;stroke-linejoin:　bevel;"　></path>
<text　x="222"　y="20">bevel</text>
</svg>

stroke-miterlimit

style de stroke-miterlimit propriété et stroke-linejoin est utilisé ensemble. Si stroke-linejoin est réglé sur l'angle, alors stroke-miterlimit peut être utilisé pour limiter la distance entre les points de croisement de deux lignes (prolongement des angles de ligne).

C'est un SVG stroke-Exemple de miterlimit :

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-miterlimit:　1.0;
　　　　　　　　　　　　　"　></path>
<text　x="29"　y="20">1.0</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-miterlimit:　2.0;
　　　　　　　　　　　　　"　></path>
<text　x="129"　y="20">2.0</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="stroke:　#000000;　　　　fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin:　miter;　　　　　　　　　　　　　stroke-miterlimit:　4.0;
　　　　　　　　　　　　　"　></path>
<text　x="229"　y="20">4.0</text>
</svg>

Veuillez noter stroke-miterlimit, comment trois chemins utilisent trois valeurs différentes, sinon ils semblent presque identiques. Effet d'image après exécution :

La longueur de la connexion de la ligne est appelée longueur de raccordement. La longueur de raccordement est mesurée de l'angle interne de la connexion à la pointe de la connexion. Dans cette image, la longueur de raccordement est dessinée en rouge au sommet de la connexion de la ligne et est répétée à droite de la connexion de la ligne :

On peut imaginer que plus la course est large, plus l'angle entre les lignes de connexion est grand, et plus le temps de raccordement est long.

dans stroke-miterlimit réglent effectivement la limite du ratio entre la longueur de l'angle et la largeur des traits. Par conséquent, stroke-miterlimit pour1.0 indique que la longueur maximale de l'angle de miter est de1 x du trait. Les angles de miter dépassent cette gamme.1.0 est la largeur du stroke-la valeur minimale possible de miterlimit.

Voici quelques exemples utilisant1.0as　stroke-Exemple de valeur de miterlimit, mais avec des angles de connexion différents :

Veuillez noter que lorsque l'angle est grand, la partie coupée de l'angle est plus grande. C'est parce que les angles aigus produisent naturellement des angles plus longs.

stroke-dasharray + stroke-dashoffset

L'attribut CSS de SVG stroke-dasharray est utilisé pour dessiner des contours de formes SVG en tirets. Il est appelé "tableau de tirets" parce que vous fournissez un tableau de nombres en tant que valeur. Ces valeurs définissent la longueur des tirets et des espaces. Par conséquent, vous devez fournir un nombre pair de nombres.

C'est un SVG stroke-Exemple de dasharray :

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;　　　　　　stroke-dasharray:　10　5"　　/>
</svg>

Dans cet exemple, un trait avec des tirets est défini, la largeur des parties en tiret est de10pixels, l'intervalle entre les tirets est5pixels. Effet visuel de l'image après exécution :

Voici quelques exemples avec différentes largeurs de tirets et d'espaces :

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　5"　　></line>
<line　x1="20"　y1="40"　x2="120"　y2="40"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　10"　　></line>
</svg>

La première ligne commence avec10commence avec la largeur de tiret5pixels pour l'intervalle, puis5pixels pour les tirets, puis5pixels pour un autre intervalle. Ensuite, répète ce schéma.

La deuxième ligne commence avec la largeur de tiret10commence, puis5pixels pour l'intervalle, puis5pixels pour les tirets, puis10pixels pour l'intervalle.

Effet visuel de l'image après exécution :

stroke-dashoffset est utilisé pour définir à quelle distance le mode tiret commence. De cette manière, vous pouvez commencer à tracer à mi-chemin d'un motif, par exemple, commencer à mi-chemin d'un motif, puis le répéter à partir de là. C'est un SVG stroke-Exemple de dashoffset :

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="170"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5;　　　　　　stroke-dashoffset:　5;
　　　　　　"　　/>
</svg>

Dans cet exemple, le dash est réglé sur-offset de5pixels, ce qui signifie que le rendu des tirets se fera5pixels commencent à entrer dans le mode tiret (ceci n'est pas complètement pris en charge par tous les navigateurs). Effet visuel de l'image après exécution :

stroke-opacity

L'attribut CSS de SVG stroke-L'opacity est utilisé pour définir l'opacité des contours des formes SVG. stroke-L'opacity prend les valeurs1Plus le nombre décimal entre les valeurs de stroke est proche de 0, plus le tracé est transparent. Plus cette valeur est proche de1plus opaque. La valeur par défaut du stroke-Une valeur d'opacity de1représentant une transparence complète des traits.

C'est un SVG stroke-Exemple d'opacity, où sont affichées trois lignes avec des stroke différents-Ligne de texte au-dessus du texte d'opacité :

<svg　width="500"　height="120">
　　　　<text　x="22"　y="40">Texte　Behind　Shape</text>
　　　　<path　d="M20,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.3;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M80,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.7;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M140,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　1;
　　　　　　　　　　　　　　　　　"　></path>
</svg>

Voici l'image générée. Veuillez noter que le texte derrière devient de plus en plus invisible.