(flotte Musik) Willkommen zurück zu den KnowledgeCity-Ergebnissen auf kaskadierenden Stylesheets. Ich bin Cliff Brozo bei Ihrem Lehrer und die heutige Lektion, Wir werden uns mit der Formatierung skalierbarer Vektorgrafiken befassen. Werfen wir einen Blick darauf, was wir tun werden. Das erste, was wir erforschen werden ist das, was passiert, wenn CSS sich selbst bekämpft. Wir werden uns ansehen, wie unser CSS funktioniert formatiert verschiedene Objekte und kämpft sich selbst weil die Namen gleich sind. Dann schauen wir uns das an und erkunden Sie skalierbare Vektorgrafiken. Wir werden untersuchen, was das Ansichtsfeld ist und wie das uns in dieses Bild schauen lässt dass wir schaffen. Wir werden nicht nur einen Kreis betrachten aber einige Polygone und Rechtecke und Pfade und dann werden wir unser CSS einbetten direkt in eine skalierbare Vektorgrafikdatei. Als wir den KnowledgeCity-Kreis kreierten, Wir haben ein skalierbares Vektorgrafikbild erstellt. und wir haben das formatiert, indem wir unsere Schriftgröße und Familie festgelegt haben. das Gewicht, den Text in Großbuchstaben verwandeln, Buchstabenabstand setzen um die Buchstaben nur ein bisschen weiter auseinander zu halten als normal und diese Buchstaben mit einer Farbe füllen. Das ist alles in der SVG-Datei. Die CSS-Datei funktioniert genauso und was wir taten, war zu erreichen die gleiche Art der Formatierung für ein anderes Objekt. Was wir am Ende hatten, war: Wenn sich einer änderte, änderte sich auch der andere. Also mussten wir das CSS setzen auf der linken Seite des Bildschirms, direkt in die SVG-Datei. Und das hielt es getrennt von dem, was in der CSS-Datei war. Eines der Dinge, die wir tun werden ist etwas, das Spaß machen könnte. Zuerst müssen wir verstehen unten links auf dem Bildschirm, Diese Vektorgrafiken werden uns geben Ein klares, scharfes Bild, egal wie groß wir es machen. Im Gegensatz zu Rastergrafiken sind die anderen Dateitypen was sich verzerren wird, wenn wir sie größer machen. Skalierbare Vektorgrafiken erlaubt drei Arten von Grafikobjekten, Formen wie Pfade und Umrisse, und das werden gerade Linien und Kurven sein, einige Bitmap-Bilder und Text. Nun zum Glück alle gängigen Webbrowser Unterstützung für skalierbare Vektorgrafiken. Wir sind hier also in guter Verfassung. Was ich beschlossen habe, um Spaß zu haben, Es werden drei gängige Fahrbahnschilder hergestellt. Ein Stoppschild, ein Einbahnstraßenschild und ein Straßenausgangsschild. Lass uns mal sehen. Das Stoppschild hier ist wirklich ein Polygon und das Polygon hat mehrere Punkte und die Punkte sind als Startort definiert, wie weit drüben und wie weit unten. Und dann bewegen wir uns ab diesem Punkt um das Stoppschild herum. So ist beispielsweise 55 50 Pixel von links entfernt und fünf Pixel von oben nach unten. Von diesem Punkt gehen wir zu 100, 5 über Das sind 100 Pixel und fünf Pixel von oben. Dann bewegen wir uns zu 125 über und 30 von oben, 125 über, 80 von oben, 100 über und 105 von oben, 50 über und 105 von oben, 25 über und 80 von oben, 25 vorbei und 30 von oben und das wird unser Polygon vervollständigen. Wenn ich also ein achtseitiges Objekt habe, Was ich tun werde, ist die Punkte herauszuziehen für alle acht Zeichen. Nun, der Grund, warum es hier zwei Polygone gibt ist, weil einer von ihnen rot sein wird und der andere wird weiß sein. Der rote ist der erste was ich als polyA deklariert habe und drüben in meinem CSS habe ich polyA so definiert, dass es eine rote Füllung hat. Polygon B ist der weiße Rand das geht in das rote Polygon und das hat einen Strich von Weiß und eine Füllung von Rot. Und der Strich ist die eigentliche Linie. Also, wenn ich das zeichne, Sie werden feststellen, dass der Anfang Teil die 50, 5 ist wirklich 52, 10. Also dieser Punkt genau hier ist nur ein bisschen weiter nach links und fünf Pixel nach unten. Und jede Nummer ist nur ein bisschen vorbei und ein bisschen mehr unten. Schauen wir uns einige andere Zeichen an. Einwegzeichen sind eine Kombination aus Rechtecken und Polygonen. Den schwarzen Teil des Einwegschildes habe ich gebogen und das sind Rechtecke. Der Empfangsfaktor ist hier ähnlich dem Randradius. 25 Pixel sind also mein Randradius Deshalb bekomme ich eine abgerundete Ecke. Aber meinen weißen Pfeil zu zeichnen ist wirklich ein Polygon. In diesem Fall ist Polygon C mein weißer Pfeil. das ist mit weiß gefüllt und Polygon C ist hier unten in Zeile sieben und ich beginne mit 175 über 25 nach unten den ganzen Weg bis 305 über 25 nach unten. 305 vorbei und fünf runter. Also ziehe ich hier vom Ende bis zum Ende eine Linie dann eine schräge Linie zu 360 und 45. Eine weitere schräge Linie 305, 85 dann wieder hoch 305, 70 zurück zu 175 und 70. Und so zeichnen Sie ein Polygon. Der Text passt an die richtige Stelle, Ich fülle den Text mit Weiß aber ich gab ihm einen Ort mit Koordinaten von 38 und 70 Hier wird es anfangen und ich gebe ihm eine Schriftgröße von 36. Am meisten Spaß machte es, ein Straßenschild zu erstellen. Jetzt lasse ich das für eine Sekunde offen und bitte dich zu überlegen, welches das echte ist und welches ist dasjenige, das mit CSS und SVG erstellt wurde. Nun, sie sehen gleich aus. Sie sehen sicher gleich aus. Einer ist etwas klarer als der andere und wenn Sie vermutet haben, dass das Original Morristown Mahwah Zeichen Das ist auf 287 in New Jersey, ist der links, du hattest recht. Die rechte ist die, die mit CSS erstellt wurde. Jetzt vielleicht mit etwas mehr Sorgfalt und der richtigen Schriftart Ich hätte es genau duplizieren können aber ich habe nicht die Fahrbahnschrift dass das US-amerikanische Autobahnsystem verwendet, Deshalb versuche ich, die Schrift so nah wie möglich zu bringen. Wenn Sie genau hinschauen, werden Sie sehen, dass der Haw in Morristown ist etwas anders als der Haw in meiner Version. Die Interstate 287 wäre sehr, sehr schwierig gewesen skalierbare Vektorgrafiken zum Erstellen weil es eine seltsame Form wäre. Es ist kein Rechteck, es ist kein Kreis. Und ich hätte einen Weg schaffen müssen oder eine Ellipse, die dieses Symbol für mich zeichnet. Zum Glück ist es im Internet als fertige SVG-Datei verfügbar und alles, was sie brauchten, war es in mein Dokument zu importieren.
