Propriété fill SVG

La définition de fill des formes SVG définit la couleur de la forme à l'intérieur de son contour. Autrement dit, la surface de la forme de l'SVG. Le remplissage est l'un des attributs CSS de base que vous pouvez définir pour toute forme SVG.

Exemple de remplissage

Le remplissage des formes SVG est le remplissage à l'intérieur du contour de la forme. Voici un exemple de remplissage SVG :

<svg width="500" height="100"><circle　cx="50" cy="50" r="25"
　　　　　　　　style="contour:　none;　remplissage:　#0000ff;"　/></svg>

Cet exemple définit un cercle rempli de la couleur bleue (#0000ff) sans couleur de contour. Voici l'image générée :

Exemple de remplissage et de contour

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

<svg width="500" height="100"><circle　cx="50" cy="50" r="25"
　　　　　　　　style="contour:　#000066;　remplissage:　#3333ff;"　/></svg>

Cet exemple utilise une couleur bleue plus foncée (#000066)couleur de contour et une couleur bleue plus claire (#3333ff)填充颜色定义圆。 以下是生成的图像：

fill-ff) définit la couleur de remplissage du circle. Voici l'image générée :

opacité-attribut CSS SVG fill-opacité est utilisée pour définir l'opacité de remplissage de la forme. fill1entre les valeurs. Plus la valeur est proche de 0, plus le remplissage est transparent. Plus la valeur est proche de1plus l'opacité est forte. La valeur par défaut fill-opacité vaut1ce qui signifie que la couleur de remplissage est完全不透明的。

C'est un exemple de remplissage de transparence fill-Exemple d'opacité, contenant deux circles ayant des (fill-opacité) du circle :

<svg width="500" height="120">
<text x="22" y="40">Texte Derrière la Forme</text>
<circle cx="50" cy="50" r="25"
　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacité:3;/path>
<circle cx="120" cy="50" r="25"
　　　　　　　　style="stroke: none; fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacité:7;/path>
</svg>

C'est l'image générée.

Veuillez noter que le texte derrière le circle droit est plus invisible que le texte derrière le circle gauche. C'est parce que le circle droit fill-l'opacité est plus élevée que la circle de gauche.

fill-rule

fill-rule détermine la manière de remplir une forme complexe. fill-Les valeurs de rule peuvent être deux valeurs différentes . Ces valeurs sont :

• nonzero

• evenodd

En règle générale, ces deux valeurs déterminent les règles internes et externes de la forme. Seulement le remplissage interne, pour une circle, c'est simple, mais pour des formes plus complexes, ce n'est pas si facile. Regardez cet exemple de <path> :

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　　　　style="stroke: "#000000"
　　　　　　　　　fill: "#"6666ff;
　　　　　　　　　fill-rule: nonzero;
　　　　　　<//path>
<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　　　　style="stroke: "#000000"
　　　　　　　　　fill: "#"6666ff;
　　　　　　　　　fill-rule: nonzero;<//path>
</svg>

Ces deux exemples de chemins ont chacun8de lignes, chaque ligne est dessinée avec un Losange, où le Losange plus grand contient le Losange plus petit. Dans le chemin de gauche, le Losange interne est dessiné de gauche à droite (par时针). Dans le chemin de droite, le Losange interne est dessiné de droite à gauche (par contre-clockwise). C'est ce qui est utilisé avec fill-rule: non-Résultat de l'image dessinée avec zero

Comme vous le voyez, la règle nonzero détermine la direction et la forme de l'Losange interne selon la forme et la forme de l'Losange interne. La règle nonzero qui détermine si un point est à l'intérieur ou à l'extérieur de la forme est :

tracer une ligne (rayon) de ce point à l'infini dans n'importe quelle direction. Chaque fois que le chemin traverse ce rayon, si le chemin traverse le rayon de gauche à droite, alors ajouter1Ajouter au compteur ; si le chemin traverse le rayon de droite à gauche, then subtract from the counter1Après avoir calculé tous les chemins traversant les rayons, si le comptage total est zéro, ce point est considéré comme en dehors du chemin. Si le comptage total n'est pas nul, le point est considéré comme à l'intérieur du chemin.

Ceci est un exemple de même chemin, utilisant fill-rule: evenodd

<svg width="500" height="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　style="stroke: "#000000"
　　　　　　fill: "#"6666ff;
　　　　　　fill-rule: "evenodd";"/path>
<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　style="stroke: "#000000"
　　　　　　fill: "#"6666ff;
　　　　　　fill-rule: "evenodd";"/path>
</svg>

Effet d'image après l'exécution :

La littéralité "evenodd" signifie "impair pair". Selon cette règle, pour déterminer si un point est à l'intérieur d'une forme, tirez une rayon en toute direction à partir de ce point, puis détectez le nombre d'intersection entre le rayon et le chemin de la forme. Tracez une ligne (rayon) de ce point à l'infini dans toute direction. Chaque fois que le chemin traverse le rayon, augmentez un compteur. Si le total est pair, le point est à l'extérieur. Si le compteur total est impair, le point est à l'intérieur de la forme.