Avant, nous nous sommes concentrés sur la résumé de différentes formes, textes et images. Ensuite, nous allons résumer le traitement des couleurs, c'est-à-dire les effets de remplissage et de bordure, comme nous discutons du toile. Vous constaterez que le contenu ici est fondamentalement le même que la toile. Ces propriétés peuvent être écrites en éléments sous forme d'attributs ou stockées dans CSS (ceci est différent de Canvas).
Couleur de remplissage - Attribut de remplissage Cette propriété utilise la couleur définie pour remplir l'intérieur de la figure. Il est très simple à utiliser. Affectez simplement la valeur de couleur à cette propriété directement. Voir l'exemple:<rect x = "10" y = "10" troupe = "bleu" Fill = "Red"
fill-opacity = "0,5" tram-opacity = "0,8" />
Dans l'exemple ci-dessus, un rectangle rouge et bleu est dessiné. Quelques points à noter:
1. Si l'attribut de remplissage n'est pas fourni, le remplissage noir sera utilisé par défaut. Si vous souhaitez annuler le remplissage, vous devez le définir sur aucune.
2. Vous pouvez définir la transparence du remplissage, c'est-à-dire l'opacité de remplissage , et la plage de valeur est de 0 à 1.
3. Un attribut légèrement plus compliqué est l'attribut de règle de remplissage . Cette propriété définit un algorithme qui détermine si le point appartient à la plage de remplissage; En plus de l'héritage, il y a deux valeurs:
Nonzero : l'algorithme utilisé pour cette valeur consiste à émettre des lignes du point qui doit être jugée dans n'importe quelle direction, puis à calculer la direction du point d'intersection entre la figure et le segment de ligne; Le résultat du calcul commence à partir de 0, et chaque segment de ligne à une intersection est de gauche à droite, ajouter 1; Chaque segment de ligne à une intersection est de droite à gauche, soustrait 1; Après avoir calculé tous les points d'intersection de cette manière, si le résultat de ce calcul n'est pas égal à 0, le point est sur la figure et doit être rempli; Si la valeur est égale à 0, elle n'a pas besoin d'être remplie à l'extérieur de la figure. Voir l'exemple suivant: Evendd : L'algorithme utilisé pour cette valeur consiste à émettre des lignes du point qui doit être jugée dans n'importe quelle direction, puis de calculer le nombre de points auxquels la figure et le segment de ligne se croisent. Si le nombre est impair, le point est transformé en figure et doit être rempli; Si le nombre est uniforme, le point est en dehors du chiffre et n'a pas besoin d'être rempli. Voir l'exemple dans la figure ci-dessous: Couleur de bordure - Attribut de trait L'exemple ci-dessus a utilisé l'attribut de course. Cet attribut utilise la valeur définie pour dessiner la bordure de la figure, qui est également très directe à utiliser. Il suffit de lui attribuer la valeur de couleur. Avis:1. Si l'attribut de trait n'est pas fourni, la bordure du graphique n'est pas dessinée par défaut.
2. Vous pouvez définir la transparence du bord, qui est une opacité de trait , et la plage de valeur est de 0 à 1.
En fait, la situation des bords est légèrement plus compliquée que l'intérieur du graphique, car en plus de la couleur, les bords ont également des formes qui doivent être définies.
Point de terminaison de la ligne - Propriété TRAD-LINECAP
Cette propriété définit le style du point final du segment de ligne. Cette propriété peut utiliser trois valeurs Butt, Square et Round . Voir l'exemple:<SVG>
<line x1 = "40" x2 = "120" y1 = "20" y2 = "20" tronçon = "noir" TRAD-width = "20" tram-linecap = "Butt" />
<line x1 = "40" x2 = "120" y1 = "60" y2 = "60" stroke = "noir" tram-width = "20" tram-linecap = "carré" />
<line x1 = "40" x2 = "120" y1 = "100" y2 = "100" stroke = "noir" TRAD-width = "20" tram-linecap = "rond" />
</svg>
Ce code trace 3 lignes en utilisant différents styles de points de terminaison de ligne.
Depuis l'image de gauche, nous pouvons facilement voir la différence de styles en 3.
Connexion de ligne - Attribut de lignée de trait Cette propriété définit le style à la connexion des segments de ligne. Cette propriété peut utiliser les trois valeurs de mitre, rond et biseau . Voir l'exemple:<SVG>
<Polyline Points = "40 60 80 20 120 60" Stroke = "Black" TRAD-Width = "20"
TRAD-LINECAP = "BUTT" FILL = "Transparent" TRAD-LINEJOIN = "mitre" />
<Polyline Points = "40 140 80 100 120 140" Stroke = "Black" TRAD-Width = "20"
stroke-linecap = "rond" fill = "transparent" stroke-linejoin = "rond" />
<Polyline Points = "40 220 80 180 120 220" Stroke = "Black" TRAD-Width = "20"
TRAD-LINECAP = "Square" FILL = "Transparent" Stroke-LineJoin = "Bevel" />
</svg>
Depuis l'image de gauche, nous pouvons facilement voir la différence de style en 3.
L'attribut virtuel et réel - trait-dasharray
Cette propriété peut définir les lignes virtuelles et réelles du segment de ligne. Voir l'exemple:<SVG>
<chemin D = "M 10 75 Q 50 10 100 75 T 190 75" TRAD = "Black"
stroke-linecap = "rond" stroke-dasharray = "5,10,5" fill = "non" />
<chemin D = "M 10 75 L 190 75" Stroke = "Red"
stroke-linecap = "Round" stroke-width = "1" stroke-dasharray = "5,5" fill = "non" />>
</svg>
Cette propriété définit certaines colonnes de nombres, mais ces chiffres doivent être séparés par les virgules.
Bien sûr, les espaces peuvent être inclus dans l'attribut, mais les espaces ne sont pas utilisés comme délimiteurs. Chaque numéro
La longueur du segment de la ligne continue est définie, et elle est cyclable dans l'ordre de dessin et non de dessin.
Ainsi, la ligne tracée dans l'exemple de gauche est une ligne continue avec 5 unités, laissant des espaces avec 5 unités.
Dessinez 5 unités de lignes pleines ... et continuez comme ça.
En plus de ces propriétés couramment utilisées, les propriétés suivantes peuvent être définies:
AVCI-MITERIMIT : c'est la même chose que dans la toile, qui gère l'effet de mitre à la connexion entre quand et si la ligne est tracée. Stroke-Dashoffset : Cette propriété définit la position où la ligne pointillée commence à être tracée. Utiliser CSS pour afficher les données HTML5 renforce l'idée de DIV + CSS, de sorte que la pièce qui affiche les données peut également être remise à CSS pour le traitement. Par rapport aux éléments HTML ordinaires, il est juste en arrière-plan et une bordure remplacée par le remplissage et la course. La plupart des autres sont similaires. Prenons un bref exemple:#Myrect: Hover {
TRAP: noir;
Remplir: bleu;
}
N'est-ce pas très familier? C'est aussi simple que cela.
Référence pratique:Index du script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Centre de développement: https://developer.mozilla.org/en/svg
Référence populaire: http://www.chinasvg.com/
Document officiel: http://www.w3.org/tr/svg11/