(musique entraînante) Bienvenue à nouveau sur les scores de KnowledgeCity sur des feuilles de style en cascade. Je suis Cliff Brozo sur ton instructeur et la leçon d'aujourd'hui, nous allons examiner la mise en forme de graphiques vectoriels évolutifs. Jetons un œil à ce que nous allons faire. La première chose que nous allons explorer c'est ce qui se passe quand CSS se bat. Nous allons voir comment notre CSS formate différents objets et se bat lui-même parce que les noms finissent par être les mêmes. Ensuite, nous allons jeter un oeil à et explorez des graphiques vectoriels évolutifs. Nous allons explorer ce qu'est la boîte de vue et comment cela nous permet de regarder cette image que nous créons. Nous regarderons non seulement un cercle mais quelques polygones et rectangles et chemins puis nous intégrerons notre CSS directement dans un fichier graphique vectoriel évolutif. Lorsque nous avons créé le cercle tournant KnowledgeCity, nous avons créé une image graphique vectorielle évolutive, et nous l'avons formaté en définissant notre taille de police et notre famille, le poids, transformant le texte en majuscules, mettre un espacement entre les lettres pour garder les lettres un peu plus séparées que d'habitude et remplir ces lettres avec une couleur. C'est tout dans le fichier SVG. Le fichier CSS fonctionne de la même manière et ce que nous faisions était d'essayer d'accomplir le même type de mise en forme sur un objet différent. Nous nous sommes retrouvés avec, quand l'un a changé, l'autre a changé aussi. Il fallait donc mettre le CSS sur le côté gauche de l'écran, directement dans le fichier SVG. Et cela le séparait de ce qui se trouvait dans le fichier CSS. Une des choses que nous allons faire est quelque chose qui pourrait être amusant. Tout d'abord, nous devons comprendre dans le coin inférieur gauche de l'écran, que les graphiques vectoriels vont nous donner une image claire et nette, quelle que soit sa taille. Contrairement aux graphiques raster, les autres types de fichiers ce qui se déformera à mesure que nous les agrandissons. Image Vectorielle permet trois types d'objets graphiques, des formes telles que des tracés et des contours, et ce seront des lignes droites et des courbes, quelques images bitmap et du texte. Maintenant, heureusement, tous les principaux navigateurs Web ont un support graphique vectoriel évolutif. Nous sommes donc en bonne forme ici. Ce que j'ai décidé de faire pour m'amuser, est de produire trois panneaux routiers courants. Un panneau d'arrêt, un panneau à sens unique et un panneau de sortie de la chaussée. Nous allons jeter un coup d'oeil. Le panneau d'arrêt est vraiment un polygone et le polygone a plusieurs points et les points sont définis comme un emplacement de départ, à quelle distance et à quelle distance. Et puis à partir de là, nous nous déplaçons autour du panneau d'arrêt. Par exemple, 55 correspond à 50 pixels de plus à partir de la gauche et cinq pixels du haut. À partir de là, nous passons à 100, 5 c'est 100 pixels au-dessus et cinq en bas du haut. Puis on passe à 125 sur et 30 à partir du haut, 125 sur, 80 du haut, 100 au-dessus et 105 du haut, 50 de plus et 105 du haut, 25 sur et 80 du haut, 25 sur et 30 du haut et cela complètera notre polygone. Donc, si j'ai un objet à huit faces, ce que je vais faire, c'est tirer les points pour les huit signes. Maintenant, la raison pour laquelle il y a deux polygones ici c'est parce que l'un d'eux va être rouge et l'autre sera blanc. Le rouge est le premier que j'ai déclaré comme polyA et plus dans mon CSS, j'ai défini polyA pour avoir un remplissage de rouge. Le polygone B est la bordure blanche qui va à l'intérieur du polygone rouge et qui a un trait de blanc et un remplissage de rouge. Et le trait est la ligne réelle. Alors quand je dessine ça, vous remarquerez que la partie de début le 50, 5 est vraiment 52, 10. Donc ce point ici est juste un peu plus vers la gauche et cinq pixels vers le bas. Et chaque numéro est juste un peu plus et un peu plus bas. Jetons un coup d'œil à quelques autres signes. Les panneaux à sens unique sont une combinaison de rectangles et de polygones. La partie noire du panneau à sens unique, j'ai donné un bord incurvé et ce sont des rectangles. Le facteur rx est ici similaire au rayon de la bordure. Donc 25 pixels est mon rayon de bordure c'est pourquoi j'obtiens un coin arrondi. Mais dessiner ma flèche blanche est vraiment un polygone. Dans ce cas, le polygone C est ma flèche blanche, qui est rempli de blanc et le polygone C se trouve ici sur la ligne sept et je commence avec 175 sur 25 vers le bas tout le chemin à 305 sur 25 vers le bas. 305 sur et cinq vers le bas. Alors je trace une ligne de la fin ici tout en haut puis une ligne inclinée à 360 et 45. Une autre ligne inclinée 305, 85 puis remonter 305, 70 retour à 175 et 70. Et c'est ainsi que vous dessinez un polygone. Le texte s'inscrit au bon endroit, Je remplis le texte de blanc mais je lui ai donné un emplacement de coordonnées 38 et 70 c'est là que ça va commencer et je lui donne une taille de police de 36. Le plus amusant a été de créer un panneau routier. Maintenant je vais laisser ça juste une seconde et te demander de penser lequel est le vrai et lequel est celui qui a été créé avec CSS et SVG. Eh bien, ils se ressemblent. Ils se ressemblent certainement. L'un est un peu plus clair que l'autre et si vous avez deviné que le signe original de Morristown Mahwah qui est sur 287 dans le New Jersey, est celui de gauche, vous aviez raison. Celui de droite est celui qui a été créé avec CSS. Maintenant, peut-être avec un peu plus de soin et la police appropriée J'aurais pu le dupliquer exactement mais je n'ai pas la police de la chaussée que le réseau routier inter-États des États-Unis utilise, j'essaie donc de rapprocher la police le plus possible. Si vous regardez attentivement, vous verrez que l'épervier de Morristown est légèrement différent de celui de ma version. L'autoroute 287 aurait été très très difficile graphiques vectoriels évolutifs à créer parce que ce serait une forme étrange. Ce n'est pas un rectangle, ce n'est pas un cercle. Et j'aurais dû créer un chemin ou une ellipse qui dessine ce symbole pour moi. Heureusement, il est disponible sur le Web sous forme de fichier SVG complet et tout ce dont ils avaient besoin était de l'importer dans mon document.
