SVG-Animation lernen – mit HTML, CSS und Javascript

1. Svg-Einführung: Hallo, möchtest du AWG-Grafik und Animation von Anfang bis Ende lernen AWG-Grafik und Animation von Anfang bis Ende Dann sind Sie hier richtig. Hallo. Ich heiße Jouger Beruflich bin ich Online-Dozent und FootsTec Webentwickler Ich habe in diesem Bereich als Angestellter und Freelancer gearbeitet Freelancer Ich freue mich sehr darauf, SVG-Animationen zu lernen , weil wir sie programmieren können und wir können sie auch steuern, wann immer wir wollen Und wie Sie wissen, spielen der Übergang und die Animation die Schlüsselrolle, um unsere Website sehr einführend zu gestalten Lassen Sie uns sehen, was wir aus diesem Kurs lernen werden, ohne Ihre Zeit zu verschwenden sehen, was wir aus diesem Kurs lernen werden, ohne Ihre Zeit zu Zunächst werde ich Ihnen vorstellen, was AVG ist. Und dann werden wir lernen, wie wir ein SVG-Bild in ein TML-Dokument einbetten können SVG-Bild in ein TML-Dokument Als Nächstes werden wir über den wichtigsten Teil dieser Tutorial-Reihe sprechen , SVG-Viewport und das View-Feld Danach werden wir in den Elementbereich, das Linienelement, das Reaktionselement, das Kreiselement, das Ellipsenelement, das Polygonelement, das Polylinienelement, das Pfadelement, das Textelement, das Bildelement, die Strich- und Feldeigenschaften springen Linienelement, das Reaktionselement, das Kreiselement, das Ellipsenelement, das Polygonelement, das Polylinienelement, das Pfadelement, das Textelement, das Bildelement, Strich- und Feldeigenschaften und wie wir Elemente, Tiefe, Symbolelement usw. gruppieren können Tiefe, Symbolelement Als Nächstes lernen wir den Textpfad und das Verlaufselement Textpfad Endlich werden wir lernen, wie wir JavaScript in SVG-Bilder einbinden können . Außerdem versuche ich, einige SVG-Animationsfunktionen zu behandeln. Nachdem wir alle diese Eigenschaften abgeschlossen haben, springen wir in den Projektbereich. Lassen Sie uns sehen, welche Art von Projekt wir in diesem Tutorial behandeln werden . In unserem ersten Projekt werden wir mit AVG eine Animation mit bewegtem Schnitt erstellen Als Nächstes werden wir dieses Projekt überspringen. In diesem Projekt werden wir SVG-Stroke-Animationen mit CSS erstellen . Diese Strichanimation mit VC-Linien sieht mit transparentem Text gut aus. Dann werden wir eine weitere Linienstrich-Animation mit einer Form erstellen . Wie Sie sehen können, zeichnet es eine Form mit der Linie. Als Nächstes erstellen wir den SVC-Animationseffekt für elastische Linien, da Sie sehen können, wie er mit der Bewegung seine Farbe ändert In unserem nächsten Projekt werden wir lernen, wie wir unseren Titel mit dem Strich verbinden können Hier siehst du einen Text auf deinem Bildschirm. Wenn ich mit dem Cursor darüber fahre, umhüllt er unseren Titel mit einer Strichlinie Sie können es auf Ihrer Website implementieren. Lassen Sie uns über unser nächstes Projekt sprechen. Hier werden wir eine passende Wab-Textanimation mit 360-Grad-Drehung erstellen passende Wab-Textanimation mit 360-Grad-Drehung Hier können Sie unseren Textinhalt sehen. Es sieht aus wie eine Wasserwelle und unser Inhalt ist auch geeignet. Wir können unseren alten Inhalt entfernen und wir können hier neuen Textinhalt einfügen. In unserem Fall werde ich Hello World eingeben. In unserem nächsten Projekt werden wir eine schnelle SVG-Loader-Animation erstellen, und Sie können das Beispiel auf Ihrem Bildschirm sehen, wie es ist. Als Nächstes werden wir mit VG drei D-Over-Animationen erstellen . Wie Sie auf Ihrem Bildschirm sehen können, können Sie, wenn ich auf diesem Bild über meinen Kazar fahre, wenn ich auf diesem Bild über meinen Kazar fahre, eine Drei-D-Form sehen aus dem Hintergrundbild herausbewegt In unserem nächsten Projekt werden wir eine Animation zur Pfadverfolgung erstellen Sie können die Kriegskarte auf Ihrem Bildschirm sehen und möchten einen Frachthaufen von New York nach Kalkutta schicken von New York nach Kalkutta Auf diesem Weg wird das Schiff das Ziel erreichen. Und wenn ich meinen Browser leer habe, kannst du die Animation sehen. Angenommen, der rote Punkt ist unsere Containergarbe und sie bewegt sich über die Linie Und in unserem nächsten Abschnitt werden wir lernen, wie wir die gesamte SBG-Paseloader-Animation nacheinander erstellen können die gesamte SBG-Paseloader-Animation nacheinander erstellen Als Nächstes werden wir eine Scroll-Doing-Animation erstellen. Wie du sehen kannst, zeichnet mein Kurar eine Form, wenn ich um ihn herum scrolle zeichnet mein Kurar eine Form, wenn ich um ihn Und das ist am Ende. Damit werden wir eine SVG-Videomaskenanimation erstellen . Und in unserem letzten Projekt werden wir das ultimative erstellen. Was ist das Besondere an diesem Projekt? Wenn ich diese Seite neu lade, kommen, wie du siehst, alle Bundesstaaten Indiens wieder an eigenen Ort zusammen und vervollständigen die Karte nicht nur das, wenn ich mein Auto auf die Bundesstaaten fahre, wie Sie sehen können, füllt es unsere Bundesstaaten mit Das ist also das Einführungsvideo unseres Kurses. Wenn Sie der Meinung sind, dass es für Sie sehr vorteilhaft ist , melden Sie sich jetzt für diesen Kurs Danke, dass du dir dieses Video angesehen hast. 2. SVG in HTML einbinden: Schön euch zu sehen. In diesem Tutorial erfahren wir, wie wir eine SVG-Datei in ein SML-Dokument aufnehmen können SVG-Datei in ein SML-Dokument Damit werden wir lernen, wie wir HVC-Eigenschaften mithilfe von CSS ändern können HVC-Eigenschaften mithilfe von CSS ändern Mal sehen, wie es funktioniert hat. Hier sehen Sie ein VG-Bild, das ich in der Illustrator-Software öffne Ich werde dieses Bild auf einer SML-Seite mit CSS verwenden. Jetzt werde ich den Studio-Code-Editor öffnen und sehen, wie er funktioniert hat Sie können nebeneinander sehen, ich öffne meinen Visual Studio Cditor und öffne auch meinen Browser und ich erstelle bereits eine HTML-Datei mit dem Namen Index Dot HTML Außerdem habe ich dieses Bild in meinem aktuellen Arbeitsverzeichnis hochgeladen. Hier siehst du ein D, welche Klasse ein Container in meinem Style-Tag ist Container in meinem Style-Tag Ich style diesen Container. Ich sagte, dass Hintergrundfarbe, Rand, erhöhte Breite und Rand um ein Pixel abgewälzt sind Sie können sehen, dass dieser Container leer ist, und jetzt möchte ich ein Vg-Bild in diesen Container einfügen Dafür verwende ich das Image-Tag, gib einfach IMG ein. Und unser Dateiname ist Mag Dot Wig. Ich werde Image Dot Wig eingeben. Jetzt werde ich diese Datei einrichten und diesen Browser neu laden. Hier kannst du die Grube sehen Wir können sie wie alle anderen Bilder verwenden, PNG, JPG, GP usw. Jetzt zeige ich Ihnen, wie wir dieses Bild mit CSS verwenden können wir dieses Bild mit CSS verwenden Ich werde diese Zeile auskommentieren und zurück zu meinem Style-Bereich gehen. In der Hintergrundeigenschaft werde ich ein Tag verwenden, nämlich URL. In der Klammer müssen wir den Dateipfad angeben, also image , av, das war's Wenn ich diese Datei einstelle und diesen Browser neu lade, können Sie das Bild sehen, aber es kommt im Hintergrund . Lass mich dir das beweisen Wenn ich etwas Loum TextFile eintippe und diesen Code einstelle und wenn ich diesen Browser neu lade, können Sie sehen, dass er im Hintergrund erscheint . Ich werde diese Zeile entfernen, ich brauche diese Zeile nicht. Ich werde diese Datei noch einmal einrichten und neu laden. Sie können also SVG-Bilder im Hintergrund sagen. Wir können unsere Datei mithilfe der Eigenschaft „ Hintergrundgröße“ recherchieren . Das werde ich dir zeigen. Hintergrundgröße 150 Pixel. Wenn ich diese Datei einstelle und diesen Browser neu lade, können Sie viele Bilder auf diesem D sehen. Sie können viele Bilder in diesem D sehen, weil wir für diesen Hintergrund keinen modifet-Wert verwenden, also gebe ich modiP ein diesem D sehen, weil wir für diesen Hintergrund keinen modifet-Wert verwenden, also gebe ich modiP Wenn ich diese Datei einstelle und diesen Browser neu lade, siehst du jetzt Ich weiß, dass Sie bereits Grundkenntnisse in CSS haben, aber ich gehe davon aus, dass Sie ein absoluter Anfänger sind Jetzt ist es für dich klar, wir können SVG-Bilder mit CSS verwenden, und wir können jedes höhere Bild als wir setzen. Jetzt zeige ich Ihnen die dritte Methode, wie wir SVG-Bilder mithilfe des SVG-Tags verwenden können. Also werde ich SVG eingeben. Dafür öffne ich dieses Bild in meinem Texteditor. Dort können Sie die Struktur des Bildes sehen. Sie können sehen, dass es mit PT gemacht wurde. Ich werde das ganze Dig-Tag kopieren. Kopieren und dann gehe ich zurück zu meiner STL-Datei mit Indexpunkt und füge sie in den Container Ich werde diese Zeile entfernen und sie hier einfügen Das ist es. Jetzt werde ich die CSS-Diagrammeigenschaft entfernen. Ich brauche das jetzt nicht und ich werde diese Datei einrichten. Wenn ich diese Datei neu lade, siehst du hier dasselbe Bild Was ist der Hauptvorteil, wenn ich den SDG-Tag so verwende? In diesem Kurs werden wir das lernen. Der Hauptvorteil ist, dass wir ATL und CSS bearbeiten können. Wenn ich die Haarfarbe ändern möchte, können wir einfach den Mauszeiger über das Farbfeld bewegen und einfach eine beliebige Farbe ziehen Wenn ich diese Datei speichere und diesen Browser neu lade , kannst du sehen, wie sich die Haarfarbe ändert Nicht nur das, wir können Klasse auf diesem Pfad verwenden. Geben Sie einfach class ein. Unser Klassenname ist Null, ist t Eins. Ich werde diesen Stil entfernen. Ich werde den Klassennamen auf einmal ändern. In diesem Tile-Tag werde ich den Selektor erstellen. Innerhalb des CSS, und jetzt können wir die CSS-Eigenschaft und ihren Wert verwenden Ich werde Fill verwenden. Ich möchte es mit knalligem Rosa füllen. Wenn ich diese Datei einstelle und diese Datei in meinem Browser neu lade, können Sie sehen, dass die Haarfarbe jetzt rosa ist Diese Fülleigenschaft wird nur für SVG verwendet. Damit können wir die Hintergrundfarbe einstellen. Lass mich dir etwas zeigen. Jetzt werde ich einen Her-Effekt erzeugen. Ich verwende Punkt, Container, Doppelpunkt, Hover, ST-Eins Dann das Innere des Wagens mit schwarzer Resistfüllung füllen. Ich möchte nur, dass wenn ich mit der Maus über das Bild fahre, die Hintergrundfarbe schwarz Ich werde diese Datei einrichten und ich werde diese Datei auch in meinem Browser neu laden, also lade ich sie neu Wie Sie sehen können, ändert sich die Hintergrundfarbe, wenn ich über den Container ändert sich die Hintergrundfarbe Ebenso können wir damit alles machen. Wir können dieses Bild animieren. Wir können dieses Bild verlinken, alles Mögliche. Diese Pfade sind im Grunde Objekte. Wir können also jede Objektfarbe ändern. Lass mich dir das zeigen. Also werde ich die Größe des Browsers erhöhen und die Entwickleroption aktivieren . Jetzt können wir das jeweilige Element auswählen, indem wir einfach den Mauszeiger über das Element bewegen, so etwas Ähnliches Und hier kannst du die Feldfarbe dieses Objekts sehen und wir können sie ändern Ziehen Sie einfach die Farbe, wie Sie möchten. Wenn Sie blaue Farbe haben möchten, ziehen Sie einfach auf Blau, fertig. Es hat sich in eine blaue Farbe verwandelt. Mit der Klasse können wir sie in unserem Style-Bereich bearbeiten. Du kannst alles bearbeiten. Wenn Sie ein Objekt löschen möchten, ja, das können Sie. Ich hoffe, jetzt ist Ihnen klar , wie wir eine SVG-Datei in unsere STL-Datei eingeben können SVG-Datei in unsere STL-Datei eingeben Wir können das Image-Tag verwenden und Sie können auch CSS verwenden, aber der beste Weg ist das SVG-Tag Ich hoffe, dir wird dieses Video gefallen. Danke, dass du dir dieses Video angesehen hast. 3. SVG ViewPort und ViewBox-Tutorial: Hallo Freunde. Willkommen zurück. Bevor wir anfangen, etwas über SVG zu lernen, sollten wir Kenntnisse über Viewport und View Fox haben Lassen Sie uns also auf den Computerbildschirm springen. Hier kannst du sehen, ich öffne meine vorherige TML-Datei. Hier siehst du ein D und seine Klasse ist Container. Sie können sehen, dass wir DV-Höhe und -Breite sowie Hintergrundfarbe und Rahmen angeben und -Breite sowie Hintergrundfarbe und Rahmen Im Container verwende ich ein SVG-Bild. Jetzt werde ich dir erklären , was Viewport ist. Viewport ist der Bereich, in dem wir das Bild sehen. Wie Sie sehen können, ist dies unser Viewport und jetzt werde ich die Größe Ich werde das SVG-Tag auswählen. Im Style-Bereich, SVG. Dann werde ich in den Autodivs zuerst meinem Viewport einen Rahmen geben , Grenze zu Pixel Durchgehend und die Farbe ist schwarz. Wenn ich diese Datei einstelle, können Sie jetzt den Rand nicht sehen da unsere Containergröße und die SVC-Bildgröße identisch Jetzt werde ich die Bildgröße ändern, Höhe 200 Pixel mit 200 Pixeln Wenn ich diese Datei einstelle und meinen Browser neu lade, können Sie jetzt den Rand sehen Jetzt ist dieser Bereich unser Viewport. Unsere Viewport-Höhe ist 200 und damit auch 200. Den Bereich, in dem Sie das Bild anzeigen, haben wir Viewport genannt Und denken Sie daran, dass der Viewport nichts mit dem Bild zu tun hat. Wir können unser Bild außerhalb des Viewports nicht überlaufen lassen. Wir können unser Bild innerhalb des Viewports skalieren. Lass uns über Viewbox sprechen. Was ist Viewbox? Wie wir das Bild im Viewport anzeigen, nennen wir es Wir können das Ansichtsfeld innerhalb des Viewpot-Bereichs vergrößern. Wir können es auch verkleinern. Lass es uns einfacher machen. Ich werde meine Illustrator-Software öffnen. Hier kannst du den ganzen weißen Bereich sehen. Dies ist unser Viewpot. Sie können eine Form im Viewpot sehen und wir können die Form an einer beliebigen Stelle in unserem Wir können die Form an eine beliebige Stelle im Viewpod verschieben. Wir können SVG-Bilder im Viewpot zeichnen. Aber wenn ich über View Boox spreche , hat das mit Zoomen und Überspannen zu tun Jetzt möchte ich dieses Bild im Viewpot größer anzeigen. Wenn wir wollen, können wir nicht das gesamte Bild im Viewpod zeigen , so etwas Wir können das mit unserer Viewbox machen. Sie können sehen, dass wir unseren Viewpot-Bereich nicht ändern, aber wir können die Bildposition innerhalb des Viewbox-Bereichs ändern Wir können es vergrößern und verkleinern, und wenn wir nicht das gesamte Bild zeigen wollen, Wir können das mit Viewbox machen. Mal sehen, wie wir das praktisch machen können? Jetzt können Sie sehen, dass unser Viewboard 200 mal 200 groß ist. Im Viewportbereich können wir ein Bild sehen, das aus der Viewbox stammt Hier können Sie eine Eigenschaft in unserem SVG sehen , das heißt Viewbox Es wurde mit den vier Werten X xs, YX, Breite und Höhe erstellt. Ich beginne mit X xs, dann komme YX, dann Breite und Höhe. Und hier seht ihr, wir nehmen ähnliche Breite und Höhe wie bei unserem Container an. Wenn ich das Sichtfeld mit und der Höhe vergrößere, können wir unser Bild verkleinern und vergrößern. Lass es mich dir zeigen Ich werde 900 ändern und ich werde auch die Höhe 900 ändern. Wenn ich diese Datei einstelle und diesen Browser neu lade, können Sie sehen, wie sie ein wenig verkleinert Wenn wir in unserem View-Feld die Gewichtung erhöhen , wird unser Bild verkleinert Die Grundgröße des Bildes ist 500 mal 500. Wenn wir den Wert erhöhen, wird er verkleinert. Wenn wir den Wert verringern, wird er vergrößert. Lass es mich dir zeigen und wir geben 200 mal 200 ein. Wenn ich diese Datei einstelle und diesen Browser lade, kannst du sehen, dass sie unser Bild ausschneidet, also unser Bild zoomt. Es ist Arbeit wie in der Zukunft. Je näher Sie kommen, desto größer wird das Objekt. In ähnlicher Weise wird das Objekt kleiner, je weiter Sie gehen. Kehren wir zum Bild in die normale Position zurück. 500 mal 500. Wenn ich diese Datei einstelle und diesen Browser neu lade, kannst du jetzt sehen, dass sie wieder bei ihm ist Lass uns über XXs und YxS sprechen. Wenn ich XXs 100 eintippe und das Bild einstelle, dann beginnt dieses View-Feld bei 100 Punkt, also etwa von hier aus 100 Punkt, also etwa Wenn ich diesen Browser neu lade, können Sie ihn sehen. Wir können Bilder mit XX und YxS verschieben. Wenn ich 200 für YxS verwende und diesen Browser neu lade, können Sie jetzt sehen, wie das Bild von hier aus beginnt Innerhalb desselben Viewport-Bereichs können wir die Bildperspektive und ihre Position mithilfe von Viewbox Probity ändern ihre Position mithilfe Gemäß der Viewbox beginnt das Bild bei 100 Xxs und 200 YxS Nicht nur das, wir können unser Bild zu einem bestimmten Zeitpunkt verkleinern Also werde ich den Wert für die erhöhte Breite 700 um 700 erhöhen 700 um 700 Wenn ich diese Datei einstelle und meinen Browser neu lade, können Sie sehen, wie sie ein wenig verkleinert wird Aber ich würde gerne wieder in die normale Position zurückkehren. Nicht nur das, wir können den Minuswert für Xxs und YxS verwenden. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie aus der entgegengesetzten Richtung beginnt Lassen Sie uns dieses Bild an seine Standardposition setzen, Null, Null. Wenn ich diese Datei einstelle und diesen Browser lade, können Sie hier sehen, dass er wieder an seiner eigenen Position ist. Ich hoffe, jetzt ist dir klar , was Viewport und Viewbox sind. Denken Sie daran, Viewport ist äußerer Bereich und Viewbox ist innerhalb eines. Lassen Sie mich Ihnen ein weiteres Beispiel zeigen , das Ihre Viewbox sehr übersichtlich macht Hier sehen Sie ein neues SVG-Bild in meinem Browser und Sie können in diesem Bild vier verschiedene Formen sehen Es ist ein einzelnes Bild, aber innerhalb des Bildes haben wir vier verschiedene Objekte, Kreis, Polygon, Reaktion, Rechteck usw., wir nennen es Image-Sprite Wenn wir verschiedene Bilder damit kombinieren, wenn wir ein einzelnes Bild erstellen, dann heißt es Image dann heißt es Jetzt möchte ich jedes Objekt einzeln in diesem Ansichtsfeld in diesem Viewport anzeigen in diesem Ansichtsfeld in diesem Viewport Aber die Frage ist, wie das möglich ist? Es ist ein einzelnes Bild. Dazu müssen wir dieses Bild zoomen und dieses Bild positionieren . Das ist es. Die Höhe unseres Viewports beträgt 500 Pixel. Wie Sie feststellen, nehmen alle Formen dieselbe Höhe ein, nämlich 125 Pixel Ich gebe 125 für Breite und 125 für Höhe ein. Wenn ich diese Datei einstelle und diesen Browser neu lade, können Sie hier sehen, dass sich Objekte nicht im Viewportbereich befinden Also müssen wir ihre Position mit XX RL ändern. Ich gebe 188 Pixel von XXs ein. Wenn ich diese Datei einstelle und diesen Browser neu lade, können Sie unsere erste geometrische Form sehen Jetzt werde ich YxS ändern und du kannst jede geometrische Form einzeln sehen Ich gebe 125 Pixel für YxS ein. Wenn ich diese Datei einstelle und diesen Browser neu lade, können Sie jetzt unseren nächsten geometrischen Formkreis sehen Wenn ich 125 mit diesem Wert hinzufüge, gebe ich 250 ein. Und stelle diese Datei ein. Jetzt können Sie eine andere rechteckige Form sehen. In ähnlicher Weise können Sie jetzt die dreieckige Form sehen, wenn ich 375 eintippe und diesen Code jetzt die dreieckige Form sehen Alle Parameter hängen von der Größe Ihres Viewports ab. Ich hoffe, Sie können jetzt verstehen, wie wir ViewVox beim Erreichen verwenden Danke, dass du dir dieses Video angesehen hast . Wir sehen uns bald. 4. SVG-Linienelement-Tutorial: Ich bin wieder mit einem neuen T zurück, und in diesem Video werden wir etwas über Linienelemente lernen. Wir haben ein Linienelement verwendet , um eines zu zeichnen. Bevor wir jedoch eine Linie zeichnen, sollten wir uns mit dem XX-Punkt und dem Y-Achsenpunkt auskennen XX-Punkt und dem Y-Achsenpunkt auskennen Nehmen wir an, dass dies unser Viewport ist und wir erstellen in diesem Viewport eine diagonale Linie Um eine Linie zu zeichnen, sollten Sie einen Startpunkt haben. Als Startpunkt benötigen wir X xs und Y xs und wir erkennen X eins und Y einen Punkt. Um eine Linie zu starten, müssen wir X xs Punkt und Y xs Punkt angeben . In ähnlicher Weise müssen wir der Linie den Punkt angeben, und wir erkennen ihn als X zwei und Y zwei. Insgesamt benötigen wir vier Attribute, um eine Linie zu zeichnen. X eins, Y eins, X zwei, Y zwei. Ohne diese Null können wir die Linie nicht erstellen. Mal sehen, wie wir es praktisch erstellen können. Hier können Sie nebeneinander sehen, ich öffne mein Visual Studio Cretor und ich öffne auch meinen Browser mit der Live Server-Erweiterung Ich habe bereits ein Kostenvoranschlagsdokument für dieses Beispiel erstellt. Hier können Sie sehen, dass ich einen Container mit dem Namen Dev erstelle und eine Hintergrundfarbe und einen Rahmen für diesen Container festlege . Außerdem sage ich, breite 500 Pixel für die mittlere Ausrichtung ausblenden, ich setze Margin Null und Auto In der DVD kannst du ein SVG-Tag sehen. In der Viewbox verwende ich Xxs Null und YX ist Null. Ich sage, wir haben dann die Höhe 100 und 100. In der Senke erstelle ich ein Raster. Für dieses Raster verwende ich das G-Tag. Ich werde dir später erklären, wie wir Grit in VG erstellen können , und ich werde es von hier aus starten Zuerst nehme ich ein Linienschild. Wie ich Ihnen bereits sagte, benötigen wir vier Attribute, um eine Linie zu erstellen. Innerhalb des Linien-Tags gebe ich X eins ein, 20 Pixeln entspricht und Y gleich und YN ist 40. Sie können davon ausgehen, dass ich nach jeweils zehn Pixeln eine Linie zeichne. Das ist also X Null, das ist Zehn und das ist X 20. Das ist Y Null, das ist Y zehn, das ist Y 20, das ist Y 30 und das ist Y 40. Unsere Linien beginnen an diesem Punkt, jetzt müssen wir den Endpunkt definieren. Unser X-Zwei-Punkt ist 80 und unser Y-Zweipunkt ist ebenfalls 40. Dadurch entsteht eine gerade Linie. Wenn ich diese Datei einstelle, kannst du keine Linie sehen , weil wir für diese Linie eine Strichfarbe definieren müssen . Ich werde die Stricheigenschaft verwenden. Ich gebe Strich und gebe diesem Strich eine Farbe. Bewerten. Wenn ich diese Datei eingestellt habe, können Sie jetzt die Zeile sehen. Ebenso, wenn Sie eine diagonale Linie erstellen möchten, erhöhen Sie einfach den Wert von Y zwei. Ich möchte 60 eingeben. Wenn ich diese Datei einstelle , siehst du, dass sie jetzt eine diagonale Linie erzeugt. Auf diese Weise können Sie eine beliebige Linie erstellen. Mithilfe der Stricheigenschaft können wir die Farbe festlegen. In unserem kommenden Video werden wir mehr über Striche erfahren. Und jetzt werde ich mit einer Linie ein Rechteck erstellen. Zuerst zeichne ich eine gerade Linie, also ändere ich Y in den Wert für B. Ich erstelle unsere gerade Linie, und dann repliziere ich diese Linie und beginne meine nächste Linie an diesem Punkt Ich gebe X eins, 80 und Y 140 Jetzt beginnt unsere zweite Linie an diesem Punkt, und ich möchte diese Linie an diesem Punkt beenden. Unser X-Punkt ist 80 und auch unser Y-Punkt ist 80. Ich werde die Farbe des blauen Strichs ändern. Wenn ich diese Datei einstelle, können Sie die Zeile sehen, und ich werde diese Zeile duplizieren. Jetzt möchte ich meine dritte Zeile an diesem Punkt beginnen und ich möchte diese Linie an diesem Punkt beenden. Dazu ändern Sie einfach dafür, um Y 1,80 für X zwei Punkte zu ändern , wir müssen 20 eingeben Es ist X Null, es ist Zehn, es ist X 20. Ich tippe X 2,20 und wir müssen Y nicht an zwei Punkten ändern, und ich werde die Strichfarbe grün ändern Wenn ich diese Datei einstelle, kannst du die Linie sehen. Für unsere vierte Zeile werde ich diese Zeile noch einmal duplizieren. Jetzt beginnen unsere Linien an diesem Punkt, das heißt X 20 und trotzdem endet diese Linie an diesem Punkt. Das heißt, wir müssen den X-Wert nicht ändern, sondern nur den Y-Zwei-Wert 40 ändern. Wenn ich diese Datei einstelle, kannst du die Zeile sehen. Herzlichen Glückwunsch. Wir erstellen einfach eine rechteckige Form mit Linien. Sie können sehen, dass wir anhand von Start - und Endpunkt ein Rechteck erstellen. Damit können wir jede beliebige geometrische Form zeichnen. Dazu müssen wir ein Linien-Tag verwenden und auch eine Strichfarbe für diese Linie angeben Andernfalls können wir die Linie nicht sehen. Wenn ich das Raster entferne und die Datei festlege, können Sie jetzt ohne Raster sehen, wie es aussah. Ich erstelle dieses Raster , damit Sie unsere Punkte besser verstehen können. Wenn wir ein Raster verwenden, ist es sehr einfach, eine Struktur zu zeichnen. Jetzt besteht Ihre Herausforderung darin, ein Dreieck ohne Raster zu erstellen . Es ist keine sehr schwierige Herausforderung. Ich hoffe, dir gefällt diese Herausforderung. Danke, dass du dir dieses Video angesehen hast. 5. SVG-Rect-Element-Tutorial: Hallo Leute, schön, dass ihr wieder da seid. In diesem Tutorial werden wir etwas über React Element lernen. Rect bedeutet Rechteck. Schauen wir uns an, welche Art von Attribut wir benötigen, um ein Rechteck in der Bigita zu erstellen Hier siehst du einen Viewpot und innerhalb des Viewpots erstelle ich ein Rechteck Wenn wir ein Rechteck wie dieses erstellen wollen, brauchen wir einen Startpunkt Dafür benötigen wir X, xs und Y-Achse. Damit benötigen wir zwei weitere Attribute. Das erste ist die Breite und das zweite ist die Höhe. Mal sehen, wie es praktisch funktioniert. Hier können Sie nebeneinander sehen, ich öffne meinen Visual Studio Cditor und ich öffne meinen Browser mit der Servererweiterung Wie Sie sehen können, erstelle ich bereits ein HTML-Dokument, und ich erstelle auch einen tiefen Klassencontainer, und ich sage, verstärkt mit Hintergrundfarbe In der Deb verwende ich bereits das SVG-Tag, und ich setze das View-Feld auf hundert mal hundert Pixel, und ich erstelle bereits eine Rasterstruktur , sodass Sie unsere Punkte sehr leicht verstehen können Fangen wir an, ein Rechteck zu erstellen. Für das Rechteck müssen wir das RC-Tag RECT verwenden. Um ein Rechteck zu erstellen, benötigen wir vier Attribute, und ich möchte mein Rechteck an diesem Punkt beginnen. Unser Xs-Punkt ist also 20 und unser Y-XS-Punkt ist 13. Dann müssen Sie die Breite angeben. Für Width haben wir ein Attribut namens width. Hey, ich habe vergessen, doppelte Anführungszeichen zu verwenden. Wir müssen diesen Wert in das doppelte Anführungszeichen verschieben. Sonst wird es nicht funktionieren. Unser Wi, ich werde 80 Pixel eingeben und muss auch die Höhe angeben. Und ich werde 40 Pixel bereitstellen. Wenn ich diese Datei einstelle, können Sie in meinem Browser sehen, dass sie ein Rechteck zeichnet und ich werde das mit Blu Benti verkleinern Wenn ich diese Datei einstelle, sieht unser Rechteck jetzt perfekt Standardmäßig ist unser Rechteck schwarz gefärbt, und dieses Rechteck enthält keinen Strich Um einen Strich zu erzeugen, müssen wir die Strichstärke STROKE verwenden , die der Innenseite der doppelten Schicht entspricht Ich werde rote Farbe verwenden Wenn ich diese Datei eingestellt habe, kannst du jetzt den Strich sehen. Wenn Sie die Farbe des Rechtecks ändern möchten, haben wir eine Eigenschaft namens fill. Stattdessen die Klammern, unsere Feldfarbe ist, ich setze Gelb ein Im Grunde verwenden wir Feldpuppen, um die Hintergrundfarbe zu ändern zu Sie können den Farbnamen eingeben, andernfalls können Sie Hexagelb verwenden Ich werde die Feldfarbe Rosa ändern. Wenn ich diese Datei sage, ist unsere rechteckige Hintergrundfarbe jetzt Rosa. Und wenn ich nicht senden möchte und Sie diesem Rechteck keine Hintergrundfarbe zuweisen möchten, müssen Sie nur keine eingeben. Wenn ich diese Datei einstelle, können Sie hier sehen, dass dieses Rechteck keine Hintergrundfarbe hat. Im Moment werde ich Gelb verwenden. Nicht nur das, wir können den Rand auf dieses Rechteck reduzieren setzen . Dann haben wir zwei Eigenschaften RX und RY. Ich werde RDX eingeben. Rx entspricht zehn. Wenn ich diese Datei einstelle, können Sie sehen, dass sie unseren Rand um zehn Pixel reduziert Sie müssen keinen Parameter eingeben, da wir View Vox verwenden Wenn ich RI-Eigenschaft, also Radius-Y-Eigenschaft, verwende, gebe ich R Y. Equal in den Codes ein Im Grunde funktioniert es vertikal, und ich werde es auf 50 setzen Wenn ich diese Datei speichere, können Sie jetzt sehen, dass sie unsere Form ändert. Rx funktioniert in Xxs und RY YxS Mit diesem Wert können Sie die Radiusabmessung ändern. Lassen Sie uns diesen Prozess kurz zusammenfassen. Wie wir dieses Rechteck erstellen können. Zuerst brauchen wir einen Startpunkt. Hier müssen wir den X-Wert und den Y-Wert übergeben, und dann müssen wir innerhalb der Höhe angeben, und wir müssen innerhalb der Höhe entsprechend dieser U-Box angeben. Nehmen wir an, das ist unser Startpunkt und ich nehme mit 70, wir müssen es von diesem Punkt aus zählen, zehn, 20, 30, 40, 50, 60, 70. Das ist Arbeit wie diese. legen wir unseren X-Radius und Y-Radius fest? Und für die Kontur verwende ich die Stricheigenschaft und für die Hintergrundfarbe die Feldeigenschaft. Wir können mehrere Rechtecke in einem Vg-Tag erstellen . Lass mich dir das zeigen. Ich möchte diese Zeile duplizieren und werde unser X 0,30 und Y 0,40 setzen Ich möchte auf 40 setzen und ich möchte die Höhe auf 20 einstellen, und ich möchte die Hintergrundfarbe grün einstellen Wenn ich diese Datei eingestellt habe, können Sie jetzt das Rechteck innerhalb des Rechtecks sehen. Wenn ich den Radius entferne, kannst du jetzt das richtige Rechteck sehen. Mit diesem Verfahren können wir Belieben mehrere Rechtecke erstellen. Ich hoffe, jetzt ist es für Sie klar, wie wir ein Rechteck innerhalb des SVG-Tags erstellen können. Danke, dass du dir dieses Video angesehen hast. 6. SVG-Kreiselement-Tutorial: Hallo Freunde. Schön , dich wieder zu sehen. In diesem Tutorial werden wir das Kreiselement lernen. Wie Sie wissen, verwenden wir dieses Element, um einen Kreis zu erstellen. Schauen wir uns also an, welche Art von Attribut wir benötigen , um einen Kreis zu erstellen. Hier siehst du einen Kreis in unserem Viewpool. Wenn du diesen Kreis zeichnen willst, dann brauchen wir X xs und YxS Wir definieren dieses Xxs-Attribut mit Cx, also Kreis Xxs und CY für Damit benötigen wir ein weiteres Attribut, nämlich den Radius. Mit dem Radius-Attribut können wir die Größe des Kreises definieren. Wenn Sie einen großen oder kleinen Kreis erstellen möchten, dann spielt der Radius die eigentliche Rolle und wir definieren diesen Radius mit R. Lassen Sie uns in den Visual Studio Codiator gehen der Radius die eigentliche Rolle und wir definieren diesen Radius mit R. Lassen Sie uns in und sehen, wie er funktioniert Hier können Sie Seite an Seite sehen, ich öffne meinen Browser und ich öffne meinen Code-Editor, und ich erstelle bereits ein Kostenvoranschlagsdokument Innerhalb des Body-Tags erstelle ich bereits einen tiefen Klassencontainer und lege Höhe und Breite für diesen Container fest. Innerhalb des Deep-Tags verwende ich WigTag mit Viewbox und erstelle bereits einen Griff, um die Attributpunkte zu verstehen Jetzt werde ich dieses Kreis-Tag erstellen, um zuerst einen Kreis zu erstellen, nur um ein Kreis-Tag zu erstellen Außerdem benötigen wir drei Attribute , um diesen Kreis zu erstellen. Zuerst brauchen wir X xs und yxs. Unser Attributname ist CX, entspricht, und ich möchte diesen Kreis von der Mitte aus bilden Ich gebe 50 und CY für YxSeQual 50 ein. Jetzt ist unser wichtigstes Attribut der Radius. Mit dem Radius können wir die Größe des Kreises definieren und wir definieren das Radiusattribut mit dem kleinen R, R entspricht 40. Wenn ich diese Datei einstelle, siehst du hier einen schwarzen Kreis. Schwarz ist die Standardfarbe. Und wenn Sie diese Kreisfarbe ändern möchten, müssen Sie das Feldattribut verwenden. Ich werde die Krawatte füllen. Füllung entspricht, ich möchte für diesen Kreis grüne Farbe verwenden. Wenn ich diese Datei hier ansehe, ist sie zu einem grünen Kreis geworden. Wenn wir Stroke benutzen wollen, ja, das können wir. Lass es mich dir zeigen. Dafür müssen wir das Stroke-Attribut verwenden. Und ich möchte rote Farbe für den Strich verwenden. Wenn ich diese Datei einstelle, kannst du hier diesen Strich sehen. Wenn wir keine Farbe verwenden wollen, geben wir einfach keine in die Füllung ein. Hier können Sie sehen, dass unser Kreis jetzt vollständig transparent ist . Im Moment verwende ich grüne Farbe, und jetzt möchte ich die Kreisgröße reduzieren, also werde ich den Radiuswert 20 reduzieren. Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, dass sie um 20 Pixel verkleinert ist, und ich möchte diesen Kreis auch in diese Ecke verschieben Ich werde den X-Wert um 80 erhöhen und muss auch den Y-Wert erhöhen 80. Wenn ich diese Datei hier einstelle, können Sie sehen, dass wir diesen Kreis perfekt in diese Ecke verschieben. Nicht nur das, wir können in diesem VG-Tag mehrere Kreise erstellen . Ich werde dieses Kreis-Tag duplizieren. Außerdem werde ich den X-Wert und den Y-Wert 30, 40 ändern, und unser Radius ist zehn und die Farbe ist blau. Wenn ich diese Datei eingestellt habe, können Sie jetzt diesen Kreis sehen. Wir erstellen ein Bild und es gibt zwei Kreise in diesem Bild. Sie können mehrere Kreise erstellen, so viele Sie möchten. Damit können Sie Rechtecke, Linien, Dreiecke usw. erstellen . Jetzt ist dir klar, wie wir in einem Veggitag einen Kreis zeichnen können in einem Veggitag einen Kreis zeichnen Im nächsten Tutorial werde ich Ihnen zeigen, wie wir ein Ellipsenelement erstellen können Danke, dass du dir dieses Video angesehen hast. 7. SVG-Ellipse-Element-Tutorial: Nochmals, schön dich wieder zu sehen. In diesem Tutorial werden wir mehr über das Ellipse-Element erfahren Mal sehen, welche Art von Attribut wir benötigen um ein Ellipse-Element in seinem VG-Tank zu erstellen Hier kannst du im Viewport sehen, ich ein Ellipsenelement zeichne Um das Ellipse-Element zu starten, benötigen wir zwei Dinge Xxs und Y xs. Wir definieren die X-Eigenschaft mit CX und wir definieren die Y-Eigenschaft mit CY. Ähnlich wie bei einem Kreis. Im Gegensatz zum Kreiselement benötigen wir zwei weitere Eigenschaften. RH bedeutet Radius X und RY bedeutet Radius Y. Schauen wir uns an, wie das in der Praxis funktioniert Hier können Sie sehen, dass ich Seite an Seite meinen Rezo Studio Corator und meinen Browser mit der Lip-Servererweiterung öffne und bereits ein HTML-Dokument erstelle Habe einen tiefen Plus-Container, und ich habe gesagt, dass die Hintergrundfarbe Rand verstärkt wird In diesem Deep-Tag habe ich ein SVG-Tag, und wir setzen Vevox Vedo Wie Sie sehen können, habe ich bereits ein Rastersystem erstellt , um die Attributpunkte zu verstehen Fangen wir an, wie man ein Ellipsenelement erstellt. Zuerst müssen wir das Ellipe-Tag eingeben. Innerhalb des Ellip-Tags nehme ich die Eigenschaften Cx und Cy, wobei Cx gleich 50 und CY gleich 50 ist, weil ich diese Ellip in der Mitte dieses Ux starten möchte Jetzt muss ich den Radius Xxs und den Radius YX angeben, wobei Rx gleich 20 und Radius yx Wenn ich diesen Code einstelle, kannst du hier unser Lippenelement sehen. Standardmäßig ist es eine schwarze Farbe. Wenn Sie die Farbe dieses IPE-Elements ändern möchten, müssen wir die Eigenschaft fill verwenden. Wenn ich das tue, möchte ich diese Ellipse mit roter Farbe füllen Wenn ich diese Datei gesagt hätte, ist sie jetzt rot geworden. Wenn Sie Kontur verwenden möchten, müssen Sie die Stricheigenschaft Strich verwenden , was Schwarz entspricht. Wenn ich diese Datei einstelle, sehe ich hier einen schwarzen Strich. Wenn Sie es transparent machen möchten, geben Sie einfach none in den Feldbereich ein. Jetzt ist es völlig transparent. Jetzt werde ich ein weiteres Ellipse-Tool darin als ig-Tag erstellen darin als ig-Tag Ich werde dieses Ellipse-Werkzeug duplizieren und die Eigenschaften Rx und ROI ändern, zehn, 20, und ich gebe die Feldfarbe Grün an Wenn ich diese Datei einstelle, können Sie hier ein weiteres Ellipselement innerhalb dieses Ellipselements sehen ein weiteres Ellipselement innerhalb dieses Ellipselements Wenn Sie dieses Elpe-Element drehen möchten, ja, das können Sie. Jetzt verwende ich Klasse in diesem Ellipe-Element, CLA-Doulas, und unser Klassenname steht an zweiter Stelle, weil dies unser zweites Ellipe-Element ist In diesem Stilbereich werde ich dieses Element auswählen Zweitens. In den Zellen verwende ich die Eigenschaft transformieren, transformieren , drehen, und ich möchte dieses Element um 20 Grad drehen. Wenn ich diese Datei sage, kann sie sehen, dass sie das F-Element an seiner Stelle um 20 Grad dreht. Wenn Sie dieses Element von seiner exakten Position aus drehen möchten, müssen Sie die Eigenschaft Transformationsursprung angeben. Lassen Sie mich Ihnen zeigen, dass Sie Aisin um 50% Höhe und 50% Breite transformieren um 50% Höhe und 50% Breite Wenn ich diese Datei einstelle, können Sie jetzt sehen dass sie sich entsprechend der Mitte dieses Viewpools dreht, und ich werde den Drehungswert um 40 erhöhen Wenn ich diese Datei einstelle, können Sie sehen, dass wir den Rotationsgrad steuern können. Ich hoffe, jetzt ist für Sie klar, was ein Lippenelement ist und wie wir ein Lippenelement in ein WIG-Tag zeichnen und wie wir es mit CSS drehen können. Danke, dass du dir dieses Video angesehen hast. 8. SVG-Polyline-Element-Tutorial: Hallo, ich bin wieder mit einem neuen Tutorial zurück. In diesem Tutorial werden wir etwas über Polyline-Elemente lernen Mal sehen, welches Attribut wir benötigen, um eine Polyenform zu erstellen Hier sehen Sie eine Polyanform in der Sichtbox. Sie können jede Art von Polyenform erstellen. Sie können Hunderte von Websites für Ihr Polyenelement erstellen. Hier können Sie sehen, dass wir insgesamt fünf Seiten in unserer Polynform haben und wir Punkte benötigen, um diese beiden Linien zu verbinden Angenommen, ich möchte meine Polynform von diesem roten Punkt aus beginnen , dann müssen wir den exakten Xs-Wert und den YXS-Wert angeben In ähnlicher Weise benötigen wir für den grünen Punkt einen weiteren Xxs- und YXS-Wert Wir benötigen insgesamt fünf verschiedene Punkte, um diese Form zu erstellen. Aber wenn Sie diese Form erneut kreuzen möchten, müssen Sie zuerst X xs und YxSPoint Mans unseren roten Punktwert angeben YxSPoint Mans unseren roten Punktwert Insgesamt benötigen wir sechs Punkte, um diese Form zu zeichnen. Jetzt können Sie sich vorstellen, dass wir dieselbe Aufgabe mit einem Linienelement erledigen können , aber es gibt ein Problem. Ich kann die Form mit Farbe nicht fühlen. Außerdem müssen wir jedes Mal Start- und Endpunkt angeben, aber Sie können diese Form mit einem Tag, dem Polylinie-Tag, erstellen mit einem Tag, dem Polylinie-Tag, Lassen Sie uns in den Browser eintauchen und sehen, wie es funktioniert. Hier können Sie sehen, dass ich bereits ein TML-Dokument erstellt und innerhalb des Body-Tags habe und innerhalb des Body-Tags einen Klassencontainer erstelle In der DV erstelle ich ein SVG-Tag, und ich setze unser View-Feld auf hundert mal hundert Pixel und ich erstelle ein Rastersystem innerhalb dieses View-Felds, um die Werte zu verstehen Jetzt fange ich mit unserer Tag-Polylinie an. Zuerst müssen wir das Polyline-Tag eingeben. Wir benötigen nur ein Attribut , um Polylinienpunkte zu erstellen. Innerhalb der Punkte müssen wir zuerst den Startpunkt angeben, Xs und YxS Nehmen wir an, ich möchte dieses Polynee von diesem Punkt aus starten. Unser Xs-Punkt ist 20 und unser YxS-Punkt ist ebenfalls 20. Nehmen wir an, unser nächster Punkt ist hier, also müssen wir ein Leerzeichen angeben, und entsprechend diesem Punkt ist unser X-Wert 80 und unser YX-Wert 30. Für unseren dritten Punkt verwende ich diesen Punkt, das bedeutet 60 y 60. Ich verwende Leerzeichen und gebe XX 60 YXX 60 ein, dann müssen wir unseren vierten Punkt angeben Und für unseren vierten Punkt werde ich diesen verwenden Gemäß diesem Punkt ist unser X 20 und unser Y xs 50. Ich werde 2050 bestehen. Wenn ich diese Datei einstelle, kannst du eine Polylinie sehen. Wie Sie sehen können, ist es standardmäßig schwarz. Und wenn Sie den Prozess kennen, wie wir die Farbe der Polylinie ändern können, müssen wir die Fülleigenschaft verwenden Grün füllen. Wenn ich diese Datei eingestellt habe, wird sie jetzt grün. Nicht nur das, wir können auch die Stricheigenschaft Stroke verwenden , die der Geschwindigkeit entspricht. Jetzt können Sie diesen Strich sehen. Sie können sehen, dass wir unsere Polylinienform nicht fertiggestellt haben. Aus diesem Grund geben wir den Strich von diesem Punkt bis zu diesem Punkt nicht den Strich von diesem Punkt bis zu diesem Punkt Wir müssen diesen Punkt schließen. Andernfalls ist diese Form vollständig und Sie wissen, dass unser Endpunkt D unser Startpunkt ist, 20 d 20. Ich kopiere diese Punkte gebe ein Leerzeichen und füge sie ein. Wenn ich diese Datei eingestellt habe, können Sie jetzt den Strich sehen. Jetzt ist unsere Form vollständig. Mit Polynee können Sie jede Form zeichnen. Wenn Sie keine Hintergrundfarbe angeben möchten, geben einfach keine in den Feldbereich ein Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, dass sie völlig transparent ist. Lassen Sie uns diesen Vortrag zusammenfassen. Um eine Polylinie zu erstellen, benötigen Sie ein Polyline-Tag. Und Sie benötigen ein Attribut, um Polylinienpunkte zu erstellen. Um eine Linie zu zeichnen, müssen Sie die Werte Xs und YXS angeben. Und für Ihren nächsten Punkt und einmal müssen Sie den X- und YXS-Wert angeben Auf diese ähnliche Weise geht es weiter. Und eine Sache, an die Sie sich erinnern müssen Ihr Endpunkt sollte Ihr Ausgangspunkt sein. Andernfalls wäre die Form unvollständig. Und wenn Sie diese Form mit Farbe füllen möchten, können Sie die Feldeigenschaft verwenden, und für den Rahmen können Sie die Stricheigenschaft verwenden. Ich hoffe, jetzt ist es für Sie klar, wie Sie eine Polylinienform in den VG-Tank zeichnen können Danke, dass du dir dieses Video angesehen hast. 9. SVG-Polygonelement-Tutorial: Hey, schön dich wieder zu sehen. In diesem Tutorial werden wir etwas über Polygonelemente lernen Mal sehen, was ein Polygonelement ist und welche Art von Attribut wir benötigen, um dieses Element zu erstellen Hier können Sie eine Polygonform sehen und Sie können beliebig viele Linien zeichnen Dies ist eine Polygonform, aber sie sah auch wie eine Polygonform Was ich in meinem vorherigen Tutorial behandelt habe. Aber es gibt einen Unterschied zwischen zwei Elementen, und ich werde später darüber erzählen. Wie Sie wissen, nennen wir diese beiden Linienverbindungspunkte Punkte, und wenn Sie mit diesen Punkten beginnen möchten, benötigen Sie den Xs-Wert und die YXS-Werte Wenn Sie dieses Polygonelement am roten Punkt beginnen möchten , müssen Sie einen roten Xs-Punkt, einen roten YxSpinfGreen-Punkt angeben, Sie müssen einen grünen Xs-Punkt und einen grünen YX-Punkt angeben und weitermachen . Der Unterschied zwischen Polylinie und Polygonelement besteht jedoch darin, dass Sie den Endpunkt nicht angeben müssen, um diese Form, das Polygonelement, zu schließen darin, dass Sie den Endpunkt nicht angeben müssen, um diese Form, das Polygonelement, zu schließen und es automatisch zu vervollständigen. Nehmen wir an, ich lösche diesen gelben Punkt oder so etwas Im Polygonelement wird die letzte Linie nicht automatisch gezeichnet Wir müssen den Punkt angeben , um diese letzte Zeile zu beenden. Aber im Polygonelement zeichnet es automatisch die Linie Das ist der Hauptunterschied zwischen ihnen. Fangen wir mit der praktischen Funktionsweise an. Hier können Sie nebeneinander sehen, ich meinen Visual Studio-Codeor und meinen Browser mit der Light-Server-Erweiterung öffne meinen Browser mit der Light-Server-Erweiterung Ich erstelle bereits ein HTML-Dokument. Im EstimL-Dokument erstelle ich einen Dep Plus-Container, spezifiziere die Hintergrundfarbe für diesen Container und hohen Wert. Außerdem setze ich den Rahmen Im Container erstelle ich ein AVG-Tag Sie können die Größe der Ansicht sehen Im VGmage erstelle ich einen Baum, um die Attribute richtig zu verstehen Lass uns ein Polygonelement zeichnen. Zuerst brauchen wir ein Polygon-Tag? Innerhalb des Polygon-Tags sind Punkte unser erstes Attribut Und ich möchte meine Polygonform von diesem Punkt aus beginnen. Ich gebe 50 ein und unser YxS ist 20, unser nächster Punkt ist Das heißt 80, 30. Xxs ist 80 und YxS ist 30. Ich gebe ein Leerzeichen zwischen ihnen an und gebe XX für 80 und YXS für 30 ein Als Nächstes werde ich hier etwas klarstellen. Ich meine, XX ist 50, YXS ist 70. Ich werde Leerzeichen eingeben. Xs ist 50 und YXS ist 70. Wenn ich also diese Datei einstelle, siehst du hier eine Dreiecksform, und jetzt möchte ich dieser Form eine Hintergrundfarbe zuweisen Also werde ich das Feld PaperTyfel gleich grün verwenden. Wenn ich diese Datei eingestellt habe, können Sie sehen, dass sie jetzt grün ist Und um einen Rahmen zu setzen, müssen wir Stroke Paperty verwenden Der Strich entspricht der Geschwindigkeit. Wenn ich diese Datei einstelle, siehst du hier einen roten Strich. Wenn Sie das bemerken, können Sie sehen , wer nur drei Punkte, 50, 20, 80 30 und 50 70, angegeben hat, aber wir geben nicht den Endpunkt an. Für diese letzte Zeile mache ich nichts. Es wird automatisch die letzte Linie gezogen, aber in unserem vorherigen Tutorial heißt das Polyan-Tutorial Wir müssen die letzte Zeile erwähnen. Andernfalls wird das Objekt nicht vervollständigt. Jetzt möchte ich hier noch einen Punkt ansprechen. Es bedeutet, dass XSS 30 ist und Y Xs 50 ist. Ich werde 30 50 bereitstellen. Wenn ich diese Datei einstelle, können Sie sehen, dass sie automatisch unsere letzte Linie zeichnet. Wenn Sie ein Diagramm erstellen möchten, ist Polylinie ideal für Sie Wenn Sie Formen erstellen möchten, empfehle ich die Verwendung eines Polygonelements Und wenn Sie es transparent machen möchten, kennen Sie den Prozess, Sie müssen nichts in den Feldbereich eingeben Das ist es. Jetzt können Sie sehen, dass es völlig transparent ist. Ich hoffe, du verstehst das Polygonelement. Danke, dass du dir dieses Video angesehen hast. 10. SVG-Pfadelement-Tutorial: Hey, ich bin wieder mit einem neuen Tag zurück, nämlich Butt Tag. Das Path-Tag ist eines der fortschrittlichsten Tags in SRG. Mit diesem Element können Sie jede Art von Rahmen zeichnen. Mit diesem Element können Sie Linie, Kreis, Rechteck, Polygonform und Minim Schauen wir uns ein Beispiel an und versuchen zu verstehen, wie wir mit dem Element Bth eine Form erstellen können Hier können Sie aus meiner Sicht sehen, wir mit BT eine grundlegende Form erstellen und Sie wissen, wenn sich zwei Linien verbinden, nennen wir das Positionspunkte Angenommen, Sie möchten diese Form am Punkt beginnen. Sie müssen angeben, dass die Koordinaten Xxs und YxS bedeuten . Wir müssen den gleichen Schritt für den grünen Punkt, den blauen Punkt und den roten Punkt ausführen Von rotem Punkt zu rosafarbenem Punkt, Sie können eine Kurvenform sehen Für diese müssen wir den Befehl arc verwenden. Sie können jede Form sehr einfach zeichnen. Es gibt viele Formen, Bogen, Polygon, Kreis, Linie usw. Für diese müssen wir verschiedene Befehle verwenden. Sehen wir uns die Befehle an. Hier sehen Sie die Befehle, die sich auf einen VG-Pfad beziehen , und wir teilen sie in vier Kategorien ein. Unser erster Befehl ist ein Zeilenbefehl innerhalb des Zeilenbefehls, wir haben vier verschiedene Befehle L, H, V und Z. In diesem Tutorial lernen wir Linienbefehle kennen, und daraus kommen die V-Ser-Kurve und die quadratischen In unserem nächsten Tutorial werden wir mehr über diese Kurve lernen und unser letzter Befehl ist der Befehl arc Ich werde dir alle Befehle nacheinander beibringen. Fangen wir mit dem Zeilenbefehl an. Hier können Sie sehen, dass ich bereits ein TML-Dokument erstellt habe und dass ich bereits einen Deep-Plus-Container erstelle Hurricane, ich style so tief. Ich habe bereits eine Hintergrundfarbe festgelegt und Höhe und Breite gesagt, und ich habe auch Rand gesagt In dieser Tiefe nehme ich bereits ein SVG-Tag und habe auch die V-Box in dieser Tiefe platziert. Vorübergehend erstelle ich ein Raster innerhalb dieses SVG-Tags. Mit dieser Körnung ist es sehr einfach, unsere Eigenschaften zu verstehen Fangen wir mit dem Praktischen an. Zuerst nehme ich den Put-Tag. Um diesen Park zu eröffnen, brauchen wir eine wichtige Immobilie namens D, D, die der Doppelpolizei entspricht. Wir müssen die Punkte bereitstellen. D bedeutet Unentschieden. Statt der Klammern müssen Sie zuerst das Kommando übernehmen und M sollte ein Großbuchstabe sein Damit können wir den Startpunkt unseres Cursors definieren. Jetzt werde ich einen Punkt nehmen, von dem aus ich diesen Pfad beginnen möchte. Ich möchte meinen Weg von diesem Punkt aus beginnen. Mann, x ist 20, YX ist 30. Ich tippe 20, YX ist 30. Wenn Sie eine einfache Linie zeichnen möchten, müssen Sie den Befehl L verwenden. Und ich möchte eine Linie von diesem Punkt bis zu diesem Punkt ziehen. Xs ist 80 und Y xs ist 30. Ich werde 18 bis 30 bestehen. Außerdem müssen wir diese Trope bereitstellen. Andernfalls können wir die Linie nicht sehen. Unsere Strichfarbe ist rot. Wenn ich diese Datei einstelle, siehst du hier eine rote Linie. Zunächst müssen Sie den Startpunkt mit einem Befehl angeben . Damit müssen Sie Xxs und YxS angeben. Dann müssen Sie ein Leerzeichen bereitstellen. Wenn Sie eine Linie zeichnen möchten, müssen Sie den Befehl verwenden und außerdem Xxs und YxS angeben Wenn Sie nur mit zwei Punkten eine gerade Linie erstellen möchten , können Sie diesen Befehl entfernen Wenn ich diese Datei einstelle, können Sie hier sehen, unsere Linie auch existiert. Sie können sehen, dass es keine Änderungen gibt. Es ist auch Arbeit. Es ist auch Arbeit, wenn wir eine gerade Linie erstellen. Aber im Moment werde ich Command verwenden. Und jetzt möchte ich eine weitere vertikale Linie zeichnen. Ich werde ein Leerzeichen angeben und X 80 eingeben und YX ist 70. Wenn ich dieses Legacy setze, zeichnet es eine Linie. Bdfaul gibt die schwarze Farbe in dieser Wenn Sie die Farbe ändern möchten, kennen Sie den Vorgang. Sie müssen Feldeigenschaften verwenden. Und ich möchte diese Form mit grüner Farbe füllen. Wenn ich diese Datei einstelle, können Sie sehen, dass sie grün geworden ist, und jetzt erstelle ich eine weitere Linie bis zu diesem Punkt. Ich werde ein Leerzeichen angeben und den Zeilenbefehl A verwenden, X-Wert ist 40 und der Y-X-Wert ist 80. Wenn ich diese Datei einstelle, können Sie sehen, wie sie eine Linie von diesem Punkt bis zu diesem Punkt zieht. Sie können jede Art von diagonaler Linie erstellen. Es ist nicht zwingend erforderlich, immer eine gerade Linie zu erstellen. Sie können sich vorstellen, dass es dem Polylinienelement ziemlich ähnlich ist. In ähnlicher Weise müssen Sie, um diese Form zu vervollständigen , den letzten Punkt angeben Wenn ich diese Form beenden möchte, muss ich einfach 20 und 30 eingeben. Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, dass sie die Form vervollständigt hat. Wenn Sie den Endpunkt nicht angeben möchten, können Sie Z verwenden. Wenn ich diese Datei festlege, können Sie ein ähnliches Ergebnis sehen . Es gibt keine Änderungen. Wenn Sie diese Form an diesem Punkt beenden möchten, können Sie einfach die Werte entfernen und die Datei festlegen. Jetzt können Sie sehen, dass unsere Form von diesem Punkt an abgeschlossen ist. Z bedeutet Cros-Path-Befehl. Wenn Sie einen Pfad schließen möchten, können wir den Befehl Z verwenden. Jetzt werde ich Ihnen die neuen Befehle H und V vorstellen . H bedeutet horizontale Linie, V bedeutet vertikale Linie. Hier können Sie die Linie sehen. Wir müssen zwei Koordinaten angeben, um die Linie zu erstellen, Xxs und YxS Wir wissen, dass wir nur eine gerade Linie erstellen müssen. Dafür müssen wir diesen letzten Punkt nicht angeben. Wir können nur den horizontalen Punkt verwenden. Ich werde den Befehl entfernen und durch den Befehl H ersetzen. Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt. Es erstellt eine Linie von 20 Pixeln bis 80 Pixeln. Wenn ich den Wert auf 90 Pixel erhöhe und die Datei festlege, können Sie jetzt sehen, dass sie unsere Form verändert. Der Befehl H funktioniert nur für die horizontale Seite. Also werde ich diese Form zurücksetzen und jetzt zeige ich Ihnen den V-Befehl. Dafür müssen wir nicht Xxs angeben, wir müssen Yxs angeben Lassen Sie mich Ihnen Foster-Typ V zeigen, und jetzt möchte ich eine Linie mit 30-90 Punkten zeichnen Also werde ich V 90 eingeben. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie die Liniengröße vertikal erhöht, und jetzt möchte ich eine rechteckige Form erstellen. Ich werde einen weiteren H-Punkt angeben, Mint Xs-Punkt, H 20. Wenn ich diese Datei einstelle, können Sie jetzt sehen, sie ein perfektes Rechteck erzeugt und unser ZT-Befehl automatisch diese Form vervollständigt, und unser Zt-Befehl erzeugt immer eine gerade Linie. Z bedeutet Befehl für geschlossenen Pfad. Lassen Sie mich die ganze Sache noch einmal erklären. Zuerst müssen Sie den Path-Tag nehmen. Anstelle des Pfad-Tags müssen Sie eine spezielle Eigenschaft verwenden, D. D bedeutet Zeichnen. In diesem D müssen Sie zuerst den Befehl verwenden. Sie müssen den Startpunkt mit diesem N-Befehl angeben. Wenn Sie keinen Befehl angeben, wird nichts gezeichnet, um eine Linie zu zeichnen Sie können den Befehl verwenden. Nach dem Befehl müssen Sie den X-Zugangspunkt und den Y-Zugangspunkt angeben . Andernfalls können Sie den horizontalen Befehl und den vertikalen Befehl verwenden . Zuletzt müssen Sie den Befehl Z und den Befehl Mans Close Path verwenden Mans Close Path Ich werde Ihren Pfad schließen. Ich hoffe, jetzt ist es für dich klar. Danke, dass du dir dieses Video angesehen hast. 11. SVG-Pfadelement-Tutorial Teil 2: Schön, dass ihr wieder da seid, Leute. Dies ist unser zweites videobezogenes VG Path-Element. In diesem Tutorial werden wir etwas über Kurvenbefehle lernen. Wie ich Ihnen bereits sagte, müssen wir im Pfadelement, dem Befehl Lane, vier Arten von Befehlen angeben, die wir in unserem vorherigen Video vervollständigen. Und in diesem Tutorial werden wir etwas über kubische Basiskurven und quadratische Basiskurven lernen kubische Basiskurven und quadratische Basiskurven Um eine Vic-Kurve zu erstellen, haben wir zwei Befehle, C und S. Und für quadratische Kurven haben wir auch zwei Befehle und T. Versuchen wir also zunächst zu verstehen, und T. Versuchen wir also zunächst dass wir kubische Bezier-Kurven wir Hier können Sie in meinem Darstellungsfenster einen Kurvenverlauf sehen, und wir haben zwei Kurven in diesem Pfad und wir haben zwei Eine Kurve ist von unten und eine andere Kurve von oben Um einen Pfad zu erstellen, benötigen wir zunächst zwei Punkte, Startpunkt und einen Endpunkt Angenommen, Rot ist unser Startpunkt und Lu unser Endpunkt. Wir erstellen diese Kurve mit kubischen Bezier-Kurven. Für diese benötigen wir zwei Punkte, um diese Kurve zu erstellen. In unserem ersten grünen Punkt müssen wir den X-Zugriffswert und den Y-x-Wert angeben. Außerdem müssen wir in unserem zweiten grünen Punkt den X-Zugriffswert und den Y-Cess-Wert angeben , und wir erkennen diesen Punkt mit dem C-Befehl. S bedeutet Cub-Kurven. Wenn Sie also einen Punkt erstellen, wird automatisch eine Kurve erstellt Es testet den Punkt nicht, aber es folgt dem Punkt, und Sie können die Kurventiefe mithilfe des YXS-Punkts steuern Sie müssen sich nur daran erinnern, dass Sie zwischen Start- und Endpunkt zwei Kurvenpunkte angeben müssen um eine QV-Ser-Kurve zu erstellen, und wir müssen einen Befehl wie diesen schreiben Zuerst müssen wir die Mittel für den Bewegungspunkt nehmen und Sie müssen den Startpunkt mit XXs und YxS definieren mit XXs und YxS Hier können Sie sehen, dass unser XX 15 und YxS 50 ist, und wie Sie in blauer Farbe sehen können, ist dies unser Endpunkt. 70 Zwischen Startpunkt und Punkt müssen wir den Befehl C verwenden, um QV ser zu verwenden, und ich erstelle unsere ersten grünen 0,20 Bedeutet, dass Xs 20 und Y xs 70 ist. Als Nächstes stellen wir einen weiteren Bordsteinpunkt zur Verfügung. Der Überstand ist 50 und die Y-Achse ist 30, und Sie müssen einen Abstand zwischen diesen beiden Bordsteinkoordinaten lassen, Sie beide Punkte nach oben, andernfalls nach unten erstellen können Punkte nach oben, Es hängt völlig von dir ab. Das Wichtigste ist, Sie zwei Punkte erstellen müssen. Lassen Sie mich Ihnen ein weiteres Beispiel für kubische Bezier-Kurven zeigen. Hier können Sie sehen, wie wir die Bordsteine bis zum Startpunkt verlaufen Dazu benötigen wir zuerst Start- und Endpunkt und wir benötigen zwei weitere Punkte, um diese Kurve zu erstellen Schauen wir uns das Praktische an, wie können wir kubische Bezier-Kurven erstellen Hier können Sie nebeneinander sehen, ich meinen Visual Studio Creator und meinen Browser mit der Life-Servererweiterung öffne und meinen Browser mit der Life-Servererweiterung und bereits ein HTML-Dokument erstellt habe Im eSTIML-Dokument erstelle ich ein SVG-Bild und eine Rasterstruktur, um die Attribute zu verstehen Zuerst erstelle ich ein Path-Tag und möchte das Feld pBatyNun verwenden Ich gebe file equal to innerhalb des Anführungszeichens nun ein. Ich möchte Stroke für meinen Pfad bewerten. Ich werde die Eigenschaft Stroke verwenden, Rate entspricht und innerhalb des D-Attributs liegt, und ich möchte meinen Pfad mit dem Moving Tool beginnen , ich lobe AM. Unser XX-Wert ist Zehn und unser Y-XS-Wert ist 60. Dies ist der Startpunkt unseres Pfads und wir müssen auch den Endpunkt angeben. Ich stelle Speicherplatz zur Verfügung und gebe 60 60 ein. Wenn ich diese Datei einstelle, können Sie hier sehen, wie Sie eine Linie zeichnen und lassen Sie mich die Linie um xxx vergrößern. Ich möchte diese Linie an dieser Stelle beenden. Also werde ich den XXS-Wert auf 80 erhöhen. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie die Zeilengröße erhöht Und jetzt möchte ich eine Kurve zwischen diesen beiden Punkten nehmen. Zwischen Start - und Endpunkt müssen Sie also einen Befehl ausführen, der C lautet und C sollte groß sein. Bis C müssen wir den Punkt angeben. Ich verwende 20 X und der Ys-Punkt ist 70. Wenn ich diese Datei einstelle, können Sie sehen, dass die Leitung weg ist. Da wir die QV-Kurve verwenden, müssen wir zwei Punkte angeben Nach dem Leerzeichen werde ich also einen weiteren Punkt erstellen , 50 und 30. Wenn ich diese Datei eingestellt habe, können Sie jetzt die Kurve sehen. Hier können Sie sehen, dass an diesem Punkt und an diesem Punkt zwei Kurven erzeugt werden. Wir müssen zwei Punkte angeben, um diese Kurve zu erstellen. Wenn ich den YxS-Wert 70 auf 90 erhöhe und diese Datei einstelle, können Sie jetzt sehen, dass sie eine viel tiefere Kurve erzeugt Wenn wir die zweite Kurve verkleinern, ist YX ein Wert, Null, Null und diese Datei so einstellen, wie Sie sehen können ist unsere zweite Kurve oben tiefer Nicht nur das, wir können Minuswerte verwenden. Wenn ich den Minuswert -40 verwende und diese Datei setze, können Sie jetzt sehen, dass sie in der oberen Seite tiefer geht Jetzt ist es für Sie klar, eine QV-Kurve zu erstellen, wir benötigen zwei Koordinaten Nicht nur das, wir können auch eine einseitige Kurve erstellen . Lass mich dir das zeigen. Wenn ich YXs Zehn für unseren ersten Punkt verwende, ähnlich, wenn ich YX Zehn für unseren zweiten Punkt verwende und diese Datei setze, können Sie jetzt sehen, dass sie eine einseitige Kurve hat Wenn Sie zwei Kurven mit einem Pfad erstellen möchten, müssen Sie einen anderen Befehl verwenden, bei dem es sich um einen Befehl handelt, und unser Befehl funktioniert immer mit unserer kubischen Kurve Meinter C-Befehl. Lassen Sie mich Ihnen zunächst das Beispiel zeigen. Hier siehst du einen Kurvenpfad. Hier verwende ich zwei kubische Bezier-Kurven in einem Pfad. In ähnlicher Weise haben wir zunächst einen Startpunkt und einen Endpunkt Aber wie Sie sehen können, gibt es noch eine andere Kurve. Aber wie Sie wissen, benötigen wir zwei Attribute, um unsere erste Kurve zu erstellen , und wir müssen einen Befehl in der Art eingeben. Nachdem ich diese Kurve erstellt habe, möchte ich eine weitere Kurve mit demselben Pfad erstellen. Dafür müssen wir den Befehl verwenden. Wenn wir command verwenden, müssen wir den Startpunkt nicht angeben. Wir müssen einfach die Endkoordinaten eingeben, und Sie müssen nicht wie beim Befehl C zwei Koordinaten angeben . Sie müssen einfach die schwarzen Punktkoordinaten eingeben, und wir müssen so etwas wie diesen Code schreiben. Nach dem C-Befehl müssen Sie den Befehl verwenden. Zuerst gebe ich den Befehl end ein und zwischen S und Nommand müssen wir den einzelnen Kurvenpunkt angeben Schauen wir uns mal an, wie es praktisch funktioniert. Ich bin wieder bei meinem Visual Studio-Koordinator. Zuerst werde ich die Autopunkte C 20 und CyXS 18 ändern C 20 und CyXS 18 Und in unserem zweiten Punkt ist XX 40 und Y xs ist 80. Wenn ich diese Datei einstelle, können Sie sehen, dass sie eine Kurve nach unten erzeugt hat. Und wenn ich den Endpunkt dieser Kurve um 80 auf 50 verringere und diese Datei einstelle, können Sie jetzt die Kurve sehen Es erzeugt eine perfekte Bogenform. Wie ich dir schon sagte, möchte ich damit eine neue Kurve erstellen, also verwende ich den Befehl. Und für unsere zweite Kurve möchte ich hier einen Punkt erstellen. Daher ist der X-Wert 70 und der Y-x-Wert 20. Ich werde 70 20 eingeben. Außerdem müssen wir den Punkt für diese Kurve angeben. Ich werde 90 60 verwenden. Wenn ich diese Datei einstelle, können Sie jetzt die Kurve sehen. Ich hoffe, jetzt ist es für Sie klar, wie können wir zwei Kuvenkurven in einem Pfad erstellen Wenn Sie eine Cuv-Kurve erstellen möchten, verwenden Sie einfach die Einheit, um den Befehl C zu verwenden Wenn Sie zwei Cuv-Kurven erstellen möchten, müssen Sie den Befehl Befehl verwenden Und unser Befehl funktioniert nur mit QV-Kurven, nicht mit quadratischen Kurven Sie müssen lediglich den Endpunkt und dazwischen den Kurvenpunkt angeben Das ist es. Lassen Sie uns also über quadratische Basiskurven sprechen Dies ist das Beispiel einer quadratischen Basiskurve. Zuerst müssen wir den Startpunkt angeben, dann müssen wir den Endpunkt angeben Der Hauptunterschied zwischen quadratischer Kurve und QV-Kurve besteht in der quadratischen Kurve Sie müssen einen Kurvenpunkt angeben, etwa diesen grünen Punkt, und dann biegt er sich automatisch entsprechend Schauen wir uns das praktische Beispiel an, wie es funktioniert. Nehmen wir einen quadratischen Wert über dieser Linie. Ich gebe XS für 20 und Y Xs für 30 ein. Wenn ich diese Datei eingestellt habe, können Sie hier sehen, dass sie eine quadratische Kurve erzeugt hat Wenn Sie eine höhere Kurve erstellen möchten, müssen Sie den YxS-Wert verringern Der YX-Wert ist zehn. Wenn ich diese Datei einstelle, können Sie mehr höhere Kurven sehen. Wenn Sie eine Kurve unter dieser Zustandslinie erstellen möchten, erhöhen Sie den Y-xs-Wert mit einer Einheit um 80. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie eine Bogenform unter der Linie erzeugt. Wenn Sie diesen Kurvenpunkt von dieser Seite auf diese Seite verschieben möchten , erhöhen Sie einfach eine Einheit, um den XXS-Wert um 40 zu erhöhen Wenn ich diese Datei einstelle, können Sie sehen, dass sie den Kurvenpunkt verschoben hat Das ist unsere quadratische Kurve. Das ist unsere quadratische Kurve. Im Grunde müssen Sie einen Punkt zwischen Start- und Endpunkt angeben , und Sie müssen den Befehl Q verwenden, um diesen Punkt anzugeben Wenn Sie zwei quadratische Kurven in einem Pfad erstellen möchten, müssen Sie den Befehl T verwenden Lassen Sie mich Ihnen zeigen, wie T-Befehle funktionieren. Hercac: In einem einzigen Pfad erzeugen wir zwei quadratische Basiskurven Zuerst müssen wir einen Startpunkt und einen Endpunkt eingeben Startpunkt und einen Endpunkt Zwischen Startpunkt und Endpunkt müssen wir Q point eingeben, müssen wir Q point eingeben um die erste Kurve zu erstellen, und Sie kennen den Prozess. Wenn wir unsere zweite quadratische Kurve erstellen möchten, einfach nur an einem Endpunkt und wir müssen keinen Kurvenpunkt angeben Gemäß dem grünen Punkt wird dieselbe Kurve in entgegengesetzter Richtung erzeugt Der Hauptvorteil ist, dass wir den zweiten Kurvenpunkt nicht angeben müssen. Für den grünen Punkt müssen wir den Befehl Q verwenden und für den lila Punkt bedeutet der Endpunkt, müssen wir den Befehl T verwenden. Schauen wir uns an, wie es in der Praxis funktioniert. Also noch einmal, ich bin wieder bei meinen Besuchen bei Ihrem Cod-Redakteur. Also werde ich zuerst die Q-Koordinaten 30 y 30 ändern. Wenn ich diese Datei einstelle, können Sie sehen, dass sie oben eine Bogenform erzeugt. Dann müssen wir einfach den Befehl P verwenden, weil wir eine weitere quadratische Kurve erstellen müssen Nach T müssen wir also den X- und YXS-Punkt angeben. XXs nehme ich 90 und von YxS nehme ich 60. Ich habe diese Datei eingestellt, hier kannst du die Kurve sehen. Sie können sehen, dass es automatisch diese Kurve erstellt , nur um einen N-Punkt zu nehmen, nicht um einen Kurvenpunkt. Dieser D-Befehl funktioniert mit Q-Befehlskoordinaten. Ohne den Q-Befehl wird er nicht funktionieren. Es funktioniert nur mit quadratischer Kurve, nicht mit QV-Kurve. Ich hoffe, jetzt ist Ihnen klar, was eine QV-Kurve und was eine quadratische Kurve ist In der QV-Kurve müssen Sie zwei Koordinatenpunkte angeben und in der quadratischen Kurve müssen Sie nur einen Koordinatenpunkt müssen Sie nur einen Dies ist der Hauptunterschied zwischen diesen beiden Kurven. Vielen Dank, dass Sie sich dieses Video angesehen haben. Wir sehen uns beim nächsten Tutorial. 12. SVG-Pfadelement-Tutorial Teil 3: Hallo Leute. Dies ist unser drittes Tutorial zum SVG-Pfadelement. Und in diesem Tutorial werden wir etwas über den Befehl arc lernen. Wie ich Ihnen bereits in diesem Tutorial gesagt habe, haben wir vier verschiedene Befehle im SVG-Pfad-Tag, und wir haben in unseren vorherigen Videos den Linienbefehl, die kubische Bezier-Kurve und die quadratische Bizer-Kurve gelernt kubische Bezier-Kurve und quadratische Bizer-Kurve In diesem Tutorial werden wir uns also mit Arcommand befassen. Um einen Bogen zu erstellen, müssen wir einen Befehl verwenden. Damit müssen wir mehrere Eigenschaften verwenden. Sehen wir uns die Eigenschaften an. Hier können Sie den Bogen in unserer Viewbox sehen. Es sieht aus wie ein Nabenkreis. Um einen Bogen zu erstellen, sollten Sie zwei Punkte haben : Start - und Endpunkt, und wir müssen den Xss-Wert und den YxS-Wert angeben , um ihre Position zu definieren Zwischen Startpunkt und Endpunkt müssen wir den Befehl A verwenden A bedeutet Arc-Befehl. Beim Befehl arc müssen wir Cess-Punkt und den YxS-Punkt angeben Dieser Punkt, der den Radius dieses Bogens definiert , bedeutet die Tiefe des Bogens Wenn wir den Radiuspunkt weiter zum Mittelpunkt bewegen, wird der Bogen um so mehr Tiefe erhalten. Schauen wir uns also den Befehl an. Zuerst müssen Sie das Kommando übernehmen, also den Punkt bewegen. Dann müssen Sie den Startpunkt-Xccess-Wert und den YXS-Wert sowie den Punkt-Überschusswert und den YX-Wert angeben YXS-Wert sowie den Punkt-Überschusswert und den YX-Wert Zwischen diesen beiden Punkten müssen wir den Befehl arc eingeben. Zuerst müssen wir den Cess-Wert und den YXS-Wert für den Kurvenpunkt angeben , und dann müssen wir die drei verschiedenen Parameter angeben die drei verschiedenen Parameter Versuchen wir also, die Parameter zu verstehen. Hier können Sie mit dem Befehl arc drei weitere Parameter sehen. Nennen Sie den ersten Parameter X Excess Rotation. Er kann unseren Kreis vom X-Überschusspunkt aus drehen. Im Grunde verwenden wir diesen Punkt nicht. In den meisten Fällen verwenden wir den Wert Null, und wir müssen mit diesem Punkt sehr vorsichtig umgehen. Unser nächster Parameter ist Large Arc Flag. Mit diesem Punkt können wir die Kreisgröße definieren. Standardmäßig hat sie Null, was einen kleinen Bogen bedeutet , und sie hat zwei Werte, eins oder Null. Wenn ich einen Wert verwende, vergrößert sich dadurch die Bogengröße, und unser letzter Parameter ist Suit Flag. Standardmäßig ist seine Eigenschaft Eins. Und es gibt auch zwei Werte, Null oder Eins. Eins bedeutet, dass es dort gebaut wird, wo wir bauen wollen. Aber wenn wir den Wert Null oder so etwas verwenden , dann wird der Bogen in die entgegengesetzte Richtung erzeugt. Sie müssen den überschüssigen Wert oder den X-Wert nicht ändern. Im Grunde müssen Sie nur mit dem Parameter S flat spielen. Es wird deinen Bogen in die entgegengesetzte Richtung erzeugen , wenn wir mit diesem Parameter spielen Schauen wir uns das Praktische an und versuchen, den Bogen in unserem Browser zu erstellen. Hier kannst du sehen, ich habe bereits ein Stal-Dokument erstellt und ich habe bereits Dp erstellt, welcher Klassencontainer ist. Ich nehme einen VGTag so tief hinein und schon habe ich die Viewbox hundert mal hundert gesetzt Und wir erstellen auch eine temporäre Körnung, um die Eigenschaften zu verstehen Lass uns einen Bogen zeichnen. Wie Sie sehen können, habe ich bereits ein Pfadelement genommen und ich habe rote Farbe für den Pfadstrich und für Feldfarbe keine Farbe gesagt. Wie Sie wissen, müssen wir zuerst das tiefere T verwenden , um eine Linie zu zeichnen. Zuerst müssen wir den Bewegungspunkt und den Endpunkt angeben . Und wir müssen AM verwenden, um den Bewegungspunkt zu starten. XX ist zehn und YXS ist 50, Leerzeichen, und jetzt gebe ich den Endpunkt an XXS ist 90 und YXS ist 50. Es wird eine Linie von diesem Punkt bis zu diesem Punkt erstellen diesem Punkt bis zu diesem Punkt Wenn ich diese Datei einstelle, kannst du hier die Linie sehen. Jetzt werde ich den Bogen zwischen Startpunkt und Endpunkt erstellen . Dafür müssen wir den Befehl A verwenden. Um einen perfekten Bogen zu erzeugen, müssen wir den Mittelpunkt nehmen. Im Grunde möchte ich sagen, dass ich an dieser Position einen Punkt erstellen möchte . Sie müssen XXS 50 YXS 30 angeben. Wenn ich diese Datei mit nichts in unserer Klasse festlege, geben wir hier nur einen Parameter an, wir müssen drei weitere Parameter angeben Zuerst müssen wir den X-Rotationsparameter angeben, und ich werde ihn für einen großen Flaggenparameter auf Null setzen, ich nehme Null und für Swift-Flag nehme ich einen. Wenn ich diese Datei einstelle, können Sie hier sehen, dass sie einen Bogen erzeugt. Wir können die Bogentiefe mit dem YXS-Wert ändern. Wenn ich diesen Wert reduziere, also zehn sage und diese Datei einstelle, können Sie hier sehen, dass dadurch die Bogentiefe reduziert wurde Wenn ich sage, YX ist Null und diese Datei setze, kannst du hier sehen, wie sie einfach eine Linie zeichnet. Und wenn Sie die Tiefe erhöhen möchten, müssen wir den YS-Wert erhöhen. Wenn ich es auf 50 setze und diese Datei einstelle, kannst du hier die Bogentiefe sehen. Jetzt werden wir lernen, was ein großer Flaggenparameter ist. Hier können Sie sehen, dass unser großer Flaggenwert Null ist. Wenn ich es auf eins setze und diese Datei einstelle, kannst du sehen, dass der Bogen gewachsen ist. Sie müssen sich nur daran erinnern, dass Null kleineren Bogen und eins einen größeren Bogen bedeutet. Daher kommen die Flag-Parameter. Es hat zwei Werte, eins oder Null. Es kann die Richtung des Bogens ändern. Wenn ich es auf Null setze und diese Datei einstelle, können Sie den Bogen in entgegengesetzter Richtung sehen. Außerdem werde ich diesen Wert auf Null ändern. Wenn ich diese Datei setze, können Sie jetzt sehen, ob Sie den Bogen in entgegengesetzter Richtung zeigen möchten, dann müssen Sie nur den Sweet-Plug-Wert ändern. Im Moment werde ich es auf eins setzen und ich werde diese Datei setzen. Jetzt möchte ich eine weitere Linie mit diesem Bogen erstellen. Ich möchte mit diesem Bogen eine Pi-Form erstellen. Ich möchte an dieser Position einen Punkt erstellen. Nach diesem Endpunkt werde ich mit einem Befehl eine Linie zeichnen . Also tippe ich, und ich werde XXS 50 verwenden und yx ist 80. Wenn ich diese Datei einstelle, können Sie hier sehen, dass sie eine Linie erzeugt, und jetzt möchte ich die Endzeile mit dem Startpunkt verbinden die Endzeile mit dem Startpunkt Dafür werde ich den Befehl Z verwenden. Wie Sie wissen, bedeutet Z den Befehl Pfad schließen. Wenn ich diese Datei einstelle, können Sie hier sehen, wie sie unseren Pfad schließt, und ich möchte diese Y-Form mit grüner Farbe füllen. Einige Tippfehler fühlen sich grün an. Wenn ich diese Datei einstelle, siehst du hier die Pi-Form und jetzt werde ich mit diesen Parametern spielen. Wenn ich den Sweep-Flag-Parameter auf Null ändere und diese Datei setze, können Sie hier sehen, wie sie eine Form wie ein Stealth-Bombarflugzeug erzeugt wie ein Stealth-Bombarflugzeug Wenn wir den Wert von Large Flag 1 ändern und diese Datei setzen, können Sie hier sehen, dass sie die Pi-Form invertiert Es vergrößert den Bogen in entgegengesetzter Richtung. Wenn Sie den Wert eins des Sup-Flags ändern und diese Datei setzen, können Sie hier sehen, dass sie nach oben gewachsen ist. Hier können Sie sehen, dass Sie mit einem Befehl verschiedene Formen erstellen können, Sie müssen mit ihren Parametern spielen. Jetzt spiele ich mit diesem Parameter, der Ces-Rotation. Aber vorher werde ich die Bogengröße verringern. Ich werde diesen Parameter einstellen. Ich werde diesen Parameter auf Null setzen. Jetzt ist es wieder in seiner normalen Position, und jetzt werde ich den XS-Rotationswert ändern. Also werde ich zuerst den YX-Wert des Bogens um 30 verringern und dann den Wert des Rotationsparameters um 20 erhöhen . Wenn ich diese Datei einstelle, können Sie jetzt sehen, wie sie unseren Bogen um 20 Grad dreht. Wenn ich diesen Wert auf acht T ändere und diese Datei setze, reagiert sie ganz anders. Wir setzen den Rotationswert immer auf Null. Sie können mit diesem Parameter spielen und experimentieren. Ich hoffe, jetzt ist Ihnen klar was der Befehl arc im Path-Tag ist. Danke, dass du dir dieses Video angesehen hast. Wir sehen uns im nächsten Tutorial. 13. SVG-Textelement-Tutorial: Hallo Freunde. Schön , dich wieder zu sehen. In diesem Tutorial werden wir etwas über ein neues Element lernen , nämlich Text. Wenn Sie etwas in ein SVG-Tag schreiben, müssen Sie ein Textelement verwenden. Also lass uns sehen, wie es funktioniert. Hier können Sie sehen, dass dies unser Standpunkt ist. Und in diesem Viewpoart schreibe ich einen Text Lowdown schreibe ich einen Text Um diesen Text zu schreiben, benötigen wir zwei Attribute XXs und YxS und der Text beginnt an der exakten Es beginnt am Ende des Textes, und du musst es dir merken Schauen wir uns also an, wie es in der Praxis funktioniert. Hier können Sie sehen, dass ich Seite an Seite meinen Visual Studio-Monitor und meinen Browser mit der Lip-Servererweiterung öffne und meinen Browser mit der Lip-Servererweiterung und bereits ein Kostenvoranschlagsdokument erstellt habe Innerhalb des Kostenvoranschlagsdokuments erstelle ich einen Deep Plus-Container, und innerhalb des Containers zeichne ich ein Bildfenster hundert Ich erstelle auch eine Kornstruktur, um die Attribute zu verstehen zu Jetzt werde ich unser Text-Tag erstellen. Ich werde Text eingeben. Also das ist unser Textag in dem Textag ich werde etwas Text schreiben. Lum Wenn Sie Visual Studio Ceditor verwenden, kennen Sie diesen Streak bereits, und jetzt werde ich die Attribute Xxs und YxS bereitstellen XX ist gleich 30 und YX ist gleich 50. Wenn ich diese Datei eingestellt habe, kannst du hier den Text sehen. Und wenn Sie es bemerken, können Sie sehen, dass der Text mit der YX-Basislinie und auch der XX-Basislinie beginnt YX-Basislinie und auch der XX-Basislinie Ohne YxS und xxx haben wir ein weiteres Attribut namens Textanker Ich werde dieses Attribut Textanker nennen. Mit diesem Attribut können wir unseren Text horizontal zentrieren. Wenn Sie Ihren Text ausrichten möchten, spielt er die entscheidende Rolle. Wir haben drei Arten von Belo in diesem Textankerattribut Start, Mitte und Ende. Lass es mich dir zeigen. Wenn ich Mitte eintippe und diese Datei einstelle, können Sie hier sehen, dass es sich um Medientext gemäß diesem Punkt handelt, weil unser Xs 30 ist. Um es besser zu verstehen, werde ich diesen Text entfernen. Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, dass sie Takes entsprechend dem Wert X 30 ausrichtet. Die Ausrichtung erfolgt also entsprechend diesem Punkt. Wenn ich die Endausrichtung verwende, tippe ich diese Datei ein und setze sie, jetzt können Sie sehen, dass sie vom Startpunkt aus nimmt , also X 30 und Y 50. Wenn ich den Standardwert verwende, fangen wir einfach an und legen diese Datei fest. Wie Sie sehen können, beginnt es mit dem Standardwert. Wenn Sie Ihren Text einfärben möchten, können Sie die Fülleigenschaft verwenden. Lass es mich dir zeigen. Füllmenge entspricht der Füllmenge. Wenn ich diese Datei einstelle, können Sie sehen, dass die Textfarbe Rate ist . Jetzt verwende ich die CSS-Eigenschaft mit dem Text-Tag. Ich möchte diesem Tag eine Klasse geben, Text entspricht. Ich nenne diese Klasse innerhalb des Style-Tags Punkt innerhalb von Cariss und jetzt möchte ich den Takes einen Strich geben Ich werde die Eigenschaft Stroke verwenden. Blau. Ein Strich ist blau. Wenn ich diese Datei einstelle, kannst du den blauen Strich sehen. Nicht nur das, wir können diese Feldeigenschaft in diesem Style-Abschnitt verwenden . Ich möchte dieses Grundstück abschneiden und werde dafür Haare verwenden. Wenn ich die Datei einstelle, können Sie dasselbe Ergebnis sehen. Wenn Sie die Feldfarbe transparent machen möchten , geben Sie hier einfach keine ein. Und stelle die Datei ein. Jetzt können Sie auf dem Strich im Text sehen und seine Feldfarbe ist transparent. Im Moment verwende ich schwarze Feldfarbe, und ich möchte keine Kontur, also werde ich keine eingeben. Jetzt werde ich anderen Text verwenden, der sich auf CSS-Eigenschaften bezieht. Lassen Sie mich Ihnen zum Beispiel die Schriftgröße zeigen. Die Schriftgröße beträgt zehn Pixel. Wenn ich diese Datei einstelle, kannst du die Schriftgröße sehen. Sie hat unsere Textgröße verkleinert. Wenn Sie eine andere Schriftfamilie verwenden möchten, ja, das können wir. Lass es mich dir zeigen. Und ich werde die Impact-Schriftfamilie verwenden. Ich bin EAC t. Wenn ich diese Datei einstelle, können Sie den Schriftstil sehen. Angenommen, wir haben einen anderen Text, also möchte ich den Text ändern und einen Namen einfügen Füge eine Mine hinzu. Jetzt kannst du sehen, dass wir zwei Wörter haben, und eins und Minh, jetzt will ich diese Zeile durchbrechen Ich möchte mein Wort unten angeben und dann eins hinzufügen. Für diese können wir kein Break-Tag wie CSS verwenden. Wir müssen ein anderes Tag namens T span verwenden . Lass es mich dir zeigen. Ich tippe, nachdem ich ein Tspan hinzugefügt habe, werde ich dieses Minh-Wort in dieses Tag verschieben Wenn ich diese Datei einstelle, können Sie sehen, dass es keinen Unterschied gibt. Jetzt möchte ich diesen Minh ausrichten. Dafür haben wir zwei Eigenschaften, DX und DY. Also werde ich zuerst das DY-Tag verwenden. DY-Tags funktionieren vertikal. Wir können den Text mithilfe des DY-Tags vertikal ausrichten. Wie Sie sehen können, ist unser Y-Wert 50, also gebe ich hier 30 ein. Jetzt können Sie sich vorstellen, dass sich der Minjuor von der Grundlinie aus nach oben bewegt, etwas hier, aber so wird das nicht funktionieren Wenn ich diese Datei einstelle, können Sie sehen, dass sie nach unten verschoben wurde. gezählt Dieser Wert wird nicht vom Viewportbereich aus Es wird der Wert von der Grundlinie des Textes aus gezählt von der Grundlinie des Textes aus Mindestens 50 Pixel. Gehen wir also 30 Pixel von der Grundlinie weg, zehn, 20 und 30. Ich werde den Wert durch zehn Pixel ersetzen. Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Das DI-Attribut funktioniert relativ von der Basisposition aus, und auf ähnliche Weise funktioniert der Dx-Wert. Lass es mich dir zeigen. Dx ist gleich 20. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Sie bewegt sich 20 Pixel von ihrem Platz weg, weil ihre exakte Position hier ist. Ab diesem Punkt hat es sich um 20 Pixel nach rechts bewegt. Wenn Sie dieses Wort an diesem Wort ausrichten möchten, müssen Sie einen Minuswert verwenden. Lass es mich dir zeigen. Wenn ich -25 verwende und die Datei festlege, können Sie die Ausrichtung sehen Jetzt ist es perfekt nach der Medaille ausgerichtet. Wenn Sie die Ausrichtung des Subtextes steuern möchten, müssen Sie die Attribute DY und Dx mit dem Pentag verwenden. Nicht nur das, Sie können hier auch die Klasse festlegen Ich werde es auf eine Klasse festlegen. Klasse Minh. Jetzt nenne ich diese Klasse mit diesem Style-Tag, Minh Im Cali-Resist ändere ich zuerst die Füllfarbe Blau. Wenn ich diese Datei einstelle, kannst du die Farbe sehen. Wir können verschiedene CSS-Eigenschaften für das Subtext-Tag verwenden. Wir können das VA-Tag nicht verwenden , um diese Zeile zu teilen. Und wenn Sie die absolute Position für diesen Text verwenden möchten, ja, das können Sie. Lass es mich dir zeigen. will nur D entfernen, da ich das X ändern werde . Wenn ich diese Datei einstelle, kannst du den Text sehen. Yx ist zehn, entsprechend der absoluten Position, was Ve Vox-Position bedeutet X ist 25. Wenn ich den YXS-Wert auf 30 erhöhe und dann die Datei festlege Jetzt ist es für dich klar, wie es funktioniert. Wenn ich einfach das SS- und das YSS-Attribut mit T-Span verwende, dann funktioniert es wie bei CSS mit absoluter Position Wenn Sie DI- und DX-Werte verwenden möchten, funktioniert das wie die relative CSS-Position Wir können mehrere CSS-Eigenschaften verwenden , z. B. später Leerzeichen , Schrift dazu usw. Jetzt ist für Sie klar, was DTC in SVG ist und wie wir es verwenden können Danke, dass du dir dieses Video angesehen hast. 14. SVG-Bildelement-Tutorial: Hallo Freunde. Schön dich wieder zu sehen. In diesem Tutorial lernen wir das Bildelement kennen, da wir das IMG-Tag in SDM verwenden, um ein Bild einzufügen In ähnlicher Weise verwenden wir das Image-Tag in SVG, um ein Bild einzufügen. Mal sehen, welches Attribut wir benötigen, um ein Bild im SVG-Tag anzuzeigen. Nehmen wir an, das ist unser Standpunkt, und ich möchte dieses Tigerbild aus diesem Blickwinkel zeigen Tigerbild aus diesem Blickwinkel Zuerst brauchen wir XS-Punkt und dann brauchen wir YXSPoint, dann brauchen wir Bildbreite und Bildhöhe Wenn wir XX Zulu und YX Zu nicht standardmäßig bereitstellen, beginnt es Ähnlich verhält es sich, wenn wir Höhe und Breite nicht angeben, standardmäßig der Stack Null Dann können wir das Bild nicht sehen. Die Eigenschaft „Breite erhöhen“ ist im SDG-Bild sehr wichtig. Lassen Sie uns mit der Praxis beginnen und sehen, wie es funktioniert. Hier können Sie nebeneinander sehen, ich meinen Visual Studio-Editor und meinen Browser mit der Servererweiterung öffne meinen Browser mit der Servererweiterung und bereits ein eSML-Dokument erstelle. Im EstimL-Dokument erstelle ich einen tiefen Plus-Container, und in dieser Tiefe nehme ich ein Perückenetikett mit einem Sichtfeld von 100 Um die Attribute zu verstehen, erstelle ich eine Rasterstruktur Zuerst nehme ich ein Image-Tag. Dann innerhalb des Bild-Tags, und jetzt verwende ich die Eigenschaften Hide und Width für dieses Bild. Bei einer Höhe von 100 entspricht die Höhe 100 und jetzt müssen wir das Bildbad bereitstellen. Dafür haben wir ein spezielles Attribut Xink HRDF. Lass es mich dir zeigen. Zuerst müssen wir einen kleinen X-Link eingeben, dann den Doppelpunkt HRDF, der innerhalb der Doppelcodes steht Wir müssen den Pfad wie ein DML-Image-Tag angeben Hier können Sie in meinem aktuellen Arbeitsverzeichnis den Bildpunkt JPG sehen Bildpunkt Ich werde dieses Bild verwenden. Also, um Bild einzugeben. Punkt JPG. Wenn ich diese Datei eingestellt habe, kannst du hier das Bild in meiner Viewbox sehen Ich habe dieses Bild entsprechend der erhöhten Breite der Viewbox eingestellt. Wenn ich die Breite um etwas 70 reduziere und diese Datei einstelle, kannst du das Ergebnis sehen Sie benötigt eine Breite von 70 Pixeln. Wenn Sie es bemerken, können Sie sehen, je nach Größe es je nach Größe auch unsere Höhe verändert. Ich werde eine Breite von 30 Pixeln verwenden. Stellen Sie diese Datei ein. Jetzt können Sie sehen, wie es unser Bild verkleinert. Wenn Sie die Bildposition mit XXs und YxS ändern möchten , ja, das können Sie. Lass es mich dir zeigen Ich werde die Eigenart XX verwenden, wobei X gleich 30 Wenn ich diese Datei einstelle, können Sie hier sehen, wie das Bild bei X 30 Pixeln beginnt An dieser Bildposition wird relativ gearbeitet, nicht absolut. Lass es mich dir zeigen. Wenn ich YX verwende, ist YX gleich Zehn und setze diese Datei, hier siehst du, sie ist relativ um zehn Pixel in YXS verschoben. Mit diesem Bild-Tag können wir Butt-Tag, Kreis, Rechteck usw. verwenden . Lass es mich dir zeigen. Jetzt möchte ich von diesem Punkt bis zu diesem Punkt eine Linie über das Bild ziehen. Dafür werde ich ein Butt Tag verwenden. Ich verwende das Draw-Attribut, D entspricht zwei innerhalb der Doppelcodes, zehn, zehn Pixel, Komma, 60 Pixel meine diesen Punkt, ich möchte eine Linie von diesem Punkt bis zu diesem Punkt zeichnen, unser X-Punkt-Endwert ist 90 Pixel und unser I-Punktwert ist 60 Pixel, und wir müssen diesem Pfad auch eine Konturfarbe geben Andernfalls können wir den Pfad nicht sehen. Ich werde die Stroke-Eigenschaft verwenden. Der Strich entspricht Rot. Wenn ich auf diese Seite setze, kannst du sehen, dass die Linie das Bild überlappt. Damit kannst du jedes beliebige Tag verwenden. Ich hoffe, dir gefällt dieses Video und es ist dir klar, wie wir Image in BG verwenden können. Danke, dass du dir dieses Video angesehen hast. 15. SVG-Kontureigenschaften: Hallo, Leute. Schön , dich wieder zu sehen. In diesem Tutorial werden wir uns mit den Eigenschaften von Strichen befassen. an, ohne Ihre Zeit zu verschwenden Schauen wir uns also alle Stricheigenschaften Hier können Sie sehen, dass wir insgesamt sieben Eigenschaften haben: Kontur, Strichbreite, Konturdeckkraft, Strichlinien-Abstand, Konturlinien-Verbindung, Strich-Anordnung und Strich-Gegenüberstellung . In diesem Tutorial werden wir also diese sieben Eigenschaften kennenlernen Fangen wir also mit dem Praktischen und versuchen zu verstehen, wie es funktioniert. Endlich bin ich wieder auf meinem Computerbildschirm. Hier können Sie nebeneinander sehen, dass ich meinen Visual Studio Creator und meinen Browser mit der Servererweiterung öffne und meinen Browser mit der Servererweiterung und bereits ein HTML-Dokument erstellt habe Und in meinem SVG-Tag habe ich bereits eine rechteckige Form ohne Kontur erstellt Wie Sie sehen können, ist die Feldfarbe grün. Beginnen wir also mit der Verwendung von Eigenschaften. Unsere erste Eigenschaft ist Schlaganfall. Also werde ich diese Immobilie nutzen. Strich und unsere Strichfarbe ist Rot. Wenn ich diese Datei einstelle, siehst du hier einen roten Strich. Mithilfe des Farbnamens können wir eine Strichfarbe zuweisen. Nicht nur das, wir können Hexa Valu verwenden . RGVValu lass Jetzt öffne ich einen neuen Tab und suche nach Farbe xa Valu . Hier siehst du eine Website, TL-Farbkurs. Ich werde auf diese Website klicken und hier kannst du viele Farben sehen. Wenn ich auf diesen Abschnitt des Diagramms klicke, siehst du hier viele Farben mit ihrem Xa-Wert und ich werde so etwas wie diese Farbe Orange verwenden Wenn ich auf diese Farbe klicke, wird sie zu einer Seite weitergeleitet, und hier kannst du den Hexa-Wert sehen Wenn ich diesen Wert kopiere und ihn hier verwende und wenn ich diese Datei einstelle und dir meine Schätzseite zeige, siehst du hier die orange Strichfarbe Auf ähnliche Weise können wir den RGV-Wert für unsere Stricheigenschaft verwenden RGV-Wert für unsere Stricheigenschaft Lass es mich dir zeigen. Wenn ich zu meiner geschätzten Farbseite zurückkehre, können Sie hier einige Farben sehen Ich werde diese blaue Farbvariante für meinen Strich verwenden. Ich werde diesen Wert kopieren und R GB binden. Dann werde ich diesen Wert ersetzen. Und wenn ich diese Datei speichere und dir meinen Browser zeige, kannst du jetzt den blauen Strich sehen. Es tut uns leid, es ist nicht richtig sichtbar. Machen wir es also sichtbarer. Also werde ich eine tiefere Variante dieser Farbe verwenden. Und wenn ich diese Datei speichere, kannst du jetzt den tiefblauen Strich sehen. Ich möchte nur sagen, dass wir drei Arten von Werten verwenden können RGV, Hexa-Code und Farbname Und jetzt zeige ich Ihnen unsere nächste Immobilie , Stroke Weed Ich werde Stroke We eingeben. Mit dieser Eigenschaft können wir Dicke dieses Strichs steuern. Hier tippe ich drei. Wenn ich diese Datei einstelle, können Sie die Dicke des Strichs sehen. Wenn ich den Wert erhöhe, erhöht sich unsere Strichstärke. Nicht nur das, wir können den Dezimalwert 0,3 verwenden. Wenn ich diese Datei eingestellt habe, können Sie jetzt die Strichstärke sehen. Jetzt sieht es sehr dünn aus. Im Moment werde ich zwei Werte verwenden. Und als nächstes ist unsere dritte Eigenschaft die Deckkraft der Striche. Summentyp, Deckkraft des Strichs. Mit dieser Eigenschaft können wir die Transparenz unseres Strichs kontrollieren Wenn ich den Wert Null verwende und diese Datei festlege, ist sie jetzt vollständig transparent. Wenn ich einen Wert verwende, ist er jetzt vollständig sichtbar. 0-1, wir können jeden DH-Wert verwenden. Lass mich dir Sound Root 0.5 zeigen. Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, dass sie halbtransparent ist. Jetzt können Sie sehen, dass der Hintergrund durch den Strich grün gefärbt ist, weil er zu 50% transparent ist. Im Moment verwende ich einen Wert. Jetzt ist unsere nächste Eigenschaft der Stroke Line Gap. Für dieses Beispiel müssen wir eine Linie erstellen. Lassen Sie uns eine Linie mit einem Linien-Tag erstellen. Linie. Ich werde dieser Linie eine Klasse geben, Klassenlinie. Wir haben bereits in unseren vorherigen Videos gelernt , wie wir eine Linie ziehen können. Wir müssen X als einen Wert verwenden. Zuerst müssen wir den X-Eins-Wert, X-Eins gleich 20 und Y Eins, gleich 20, angeben . Ich werde diese Linie an diesem Punkt beginnen, und jetzt müssen wir den Endpunkt dieser Linie angeben . Ich gebe X zwei gleich 80 und Y zwei gleich 20 ein. Jetzt werde ich diese Zeilenklasse verwenden. Ich werde diesen Klassennamen kopieren und ihn hier Dot Line nennen. Innerhalb der Kalibrationen ist unsere erste Eigenschaft wahr. Und unsere Strichfarbe ist rot. Wenn ich diesen Boden auslege, kannst du die Linie sehen. Jetzt möchte ich die Strichstärke erhöhen, also verwende ich die Eigenschaft Strichstärke. Ich werde zwei für diesen Strich verwenden. Jetzt können Sie diese Strichstärke sehen. Jetzt verwende ich unsere nächste Eigenschaft, nämlich Stroke Line Cap, Irgendein Typ, Stroke, Line Cap. Im Grunde genommen hat der Strich drei Werte, nämlich quadratisch und rund, aber das ist der Standardwert des Strichs. Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt. Aber wenn ich den quadratischen Wert verwende und diese Datei festlege, können Sie jetzt sehen, dass der Strich ein wenig verändert wurde. Im Grunde hat es die Linienbreite erhöht. Lassen Sie mich Ihnen erklären, was hier passiert. Hier können Sie eine Konturlinie mithilfe der Butt-Eigenschaft sehen. Angenommen, unsere Strichstärke beträgt vier Sie können die Grundlinie in schwarzer Farbe, unseren Strich, zwei Pixel über der schwarzen Linie und zwei Pixel unterhalb der schwarzen Linie sehen. Aber wenn ich die quadratische Eigenschaft verwende, können Sie hier zwei Pixel nach oben und zwei Pixel nach unten sehen Damit werden auf beiden Seiten zwei Pixel hinzugefügt. Insgesamt wird die Linie um vier Pixel vergrößert, zwei Pixel auf der beleuchteten Seite und zwei Pixel auf der rechten Seite. Aber wenn ich die Eigenschaft but verwende , werden keine Striche auf beiden Seiten hinzugefügt. Das ist der grundlegende Unterschied zwischen einer Grundform und einer quadratischen Eigenschaft, und unsere letzte Eigenschaft ist rund. Wenn ich diese Eigenschaft verwende und diese Datei speichere, können Sie jetzt die Ecke der Kontur sehen, sie ist abgerundet. Es ist klar für dich. Grundsätzlich funktioniert Landschaftsimmobilie an den Rändern. Lassen Sie uns über unsere nächste Eigenschaft sprechen, nämlich die Verknüpfung von Konturlinien. Linienverbindungen bedeuten, dass beide Linien miteinander verbunden sind. Bei dieser Verbindung können wir verschiedene Effekttypen verwenden. Lassen Sie uns die Immobilie nutzen. Also zu tippen, Strich, Line Join. Im Grunde haben wir insgesamt drei Werte für diese Eigenschaft. Mehr rund um die Bibel. Zuerst werde ich Mitra benutzen. Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt , da es sich um den Standardwert Aber wenn ich den runden Wert verwende und diese Datei festlege und Sie jetzt den runden Effekt in jeder Ecke sehen können , ist unser dritter Wert Bb. Lass es mich dir zeigen. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie einen kleinen Schnitt in den Ecken haben. Wenn ich diesen Zell verwende, schneidet er die Verbindungskanten ab. Wir können diese Eigenschaft nur für Verbindungen verwenden , nicht für Linienkanten. Jetzt verwende ich unsere sechs Eigenschaften, nämlich das Strobe-Array Also um Strobe Array einzugeben. Wenn Sie sich an diesen SS-Buren-Stil wie gepunktet, dst usw. erinnern wie gepunktet, dst usw. In ähnlicher Weise funktionieren die Eigenschaften des Stroke Desk Arrays. Wir können den Schreibtischeffekt erzeugen, indem diese Eigenschaft verwenden. Lass es mich dir zeigen. Angenommen, ich erstelle einen DST mit zwei Pixeln und dann müssen wir die Lückengröße angeben und unsere Lückengröße beträgt drei Pixel. Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, wie der Bildschirm geworfen wird. Nehmen wir an, alle Punkte sind zwei Pixel groß und alle Lücken sind drei Pixel groß. Und jetzt möchte ich die Lückengröße erhöhen. Ich möchte diesen Wert um sieben erhöhen. Wenn ich diese Datei einstelle, können Sie jetzt den Abstand zwischen diesen Pixeln sehen. Ich möchte auch die Pixelgröße erhöhen, fünf Pixel. Wenn ich diese Datei eingestellt habe, können Sie jetzt die Anzeigengröße sehen. Angenommen, Sie möchten jetzt Dunkelgröße von zwei Pixeln und eine Lückengröße von zwei Pixeln. Für diese können wir diesen Wert auf diese Weise schreiben, geben Sie zwei ein. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass die Pixelgröße zwei ist, auch die Lückengröße ist zwei. Ähnlich ist es, wenn ich ein Pixel verwende und diese Datei festlege, jetzt ist die Pixelgröße eins, auch die Lückengröße ist eins. Nicht nur das, wir können den Dezimalwert für dieses D-Array verwenden. Lass es mich dir zeigen. Ich werde 0,6 verwenden. Wenn ich diese Datei einstelle, können Sie jetzt die Schreibtischgröße sehen. Machen wir es ein wenig im Voraus. Im Moment ist unsere Schreibtischgröße fünf und unsere Lückengröße zwei. Auch hier ist unsere Schreibtischgröße drei. Wenn ich diese Datei einstelle, kannst du jetzt diesen Strich sehen , dann gebe ich noch ein Leerzeichen zwei. Wenn ich diese Datei eingestellt habe, siehst du jetzt, dass sie ziemlich fortgeschritten aussieht. Hier können Sie sehen, dass unsere erste Schreibtischgröße fünf ist und unsere Raumgröße zwei, dann unsere zweite Größe ist drei und unsere Raumgröße ist zwei Jetzt ist es für Sie klar, wie wir diese Eigenschaft verwenden können , um verschiedene Stricheffekte zu erzeugen Daher kommt unsere letzte Eigenschaft, nämlich Stroke Dash Pose Also um zu tippen, Stro Dash Oset. Stroke Dash oste bedeutet, dass Sie die Strichpunkte ein wenig nach links verschieben können die Strichpunkte ein wenig nach links verschieben Andernfalls rechte Seite. Lass es mich dir zeigen. Konzentrieren Sie sich einfach auf die Ecke dieses Rechtecks. Ich werde eine Immobilie nutzen. Wenn ich diese Datei eingestellt habe, können Sie jetzt die Ecken sehen. Es bewegt sich ein bisschen. Und jetzt möchte ich diesen Strich um drei Pixel verschieben. Wenn ich diese Datei einstelle, kannst du jetzt sehen, Strich und Bewegungen, drei Pixel Lift. Das sind also unsere Eigenschaften für sieben Striche. Unsere erste Eigenschaft ist der Schlaganfall. Mit dieser Eigenschaft können wir jede Farbe festlegen, und unsere zweite Eigenschaft ist Breite. Mit dieser Eigenschaft können wir die Dicke des Strichs steuern, und unsere dritte Eigenschaft ist die Deckkraft der Kontur Mit dieser Eigenschaft können wir die Transparenz des Strichs steuern Und mithilfe der Linienverbindungseigenschaft können wir die Verbindungseffekte steuern. Wir können den Rundungseffekt verwenden, wir können den Up-Cut-Effekt usw. verwenden. Und mit der Strich-Array-Eigenschaft können wir einen Strich in unserem Strich erzeugen, und mit der Eigenschaft Strich Upset können wir den Strich verschieben Und unsere letzte Eigenschaft ist der Abstand zwischen den Linien der Striche. Wir können diese Eigenschaft der Linienbegrenzung grundsätzlich für Linien verwenden , nicht für Formen. Jetzt ist es für Sie klar, was sind diese Stricheigenschaften? Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Tutorium. 16. SVG-Fülleigenschaften: Hallo Leute. Schön , dich wieder zu sehen. In diesem Tutorial werden wir etwas über Feldeigenschaften lernen. Sehen wir uns die Eigenschaften an. Wir haben insgesamt drei eigenschaftsbezogene Felder: Füllung, Filoposität und Feldregel Lassen Sie uns versuchen, es praktisch zu untersuchen, wie es funktioniert hat. Hier können Sie sehen, dass ich Seite an Seite meine Visual Studio-Farbe und meinen Browser mit der Live Server-Erweiterung öffne und meinen Browser mit der Live Server-Erweiterung Wie Sie sehen können, erstelle ich bereits ein HTML-Dokument, Indexpunkt-TML Innerhalb des eSTIML-Dokuments erstelle ich einen D In diesem Container erstelle ich einen Wigtag mit einem Feld mit hundert mal hundert Ansichten In diesem Igag erstelle ich ein Raster, um die Attribute zu verstehen Dann erstelle ich eine Polygonform. Hier kannst du die Form sehen. Es sah aus wie ein Sir und ich gebe dieser Polygonform auch eine Klasse, nämlich Form, und hier können Sie sehen, dass wir mit dieser Klasse diese Form, den Strich, die rote Farbe und die Füllung nun stylen rote Farbe und die Füllung nun Wenn ich keine Feldfarbe verwende, wenn ich dieses Schlüsselwort entferne und diese Datei setze, können Sie hier sehen, wie sie unsere Formfarbe mit Schwarz füllt Das ist unsere erste Eigenschaft, nämlich Fill. Hier können wir jede Art von Wert verwenden, RGV-Wert, Hexa-Wert, ansonsten farbige Namen Im Moment verwende ich einen Farbnamen, der grün ist. Wenn ich diese Datei hier festlege, füllt sie unsere Form mit grüner Farbe, und jetzt verwende ich RGV-Wert und ich verwende gelbe Farbe Wenn ich diese Datei einstelle, können Sie hier sehen, wie sie die Form mit gelber Farbe füllt Hier geben wir den RGV-Wert an. In ähnlicher Weise funktioniert Hexav. Lass es mich dir zeigen. Jetzt werde ich Hexavalu verwenden Also müssen wir zuerst has verwenden, und ich möchte die Startfarbe mit Blau füllen, Typ Sumo, Typ Sumo Wenn ich diese Datei einstelle, können Sie hier sehen, wie der Koch sie mit blauer Farbe füllt Lassen Sie uns über unsere nächste Eigenschaft sprechen, nämlich fill opacity, summotypeFLL, opacity Mit dieser Eigenschaft können wir die Transparenz steuern. Wenn ich Null setze und diese Datei setze, ist Canc hier völlig transparent Und wenn ich eins setze und dann die Datei setze, siehst du hier, jetzt ist sie komplett sichtbar 1-0, wir müssen Dezimalstellen verwenden , um die Transparenz zu kontrollieren . Lass es mich dir zeigen Wenn ich 0,5 verwende und diese Datei einstelle, ist sie jetzt halbtransparent. Wenn Sie diese Transparenz weiter reduzieren möchten, geben Sie einfach 0,2 ein und legen Sie die Datei fest. Jetzt ist es weniger transparent als das vorherige. Ebenso, wenn Sie die Transparenz erhöhen möchten, geben Sie einfach 0.9 ein und legen Sie die Datei fest. Sie können so viel kontrollieren, wie Sie möchten und unsere letzte und dritte Eigenschaft ist die Füllregel. Lass es mich dir zeigen. Diese Immobilie funktioniert nur bei komplexem Design. Ich möchte sagen, dass Formen funktionieren, wenn sie sich überlappen Ich zeichne diese komplexe Sternform mit einem einzigen Polygonelement Hier können Sie insgesamt fünf Spitzen sehen. Aber zwischen all den Spitzen sieht man hier eine andere Form Wir können diese Formfarbe kontrollieren. Wir können es transparent machen. Lass es mich dir zeigen. Diese filuale Eigenschaft hat zwei Werte, die nicht Null sind Also werde ich zuerst diesen Wert verwenden, der nicht Null ist. Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt , da es sich um den Standardwert der Feldregel handelt, aber es gibt einen anderen Wert , der sogar ungerade ist. Lass es mich dir zeigen. Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, dass sie unsere mediale Form transparent macht, aber es wurden nicht alle Formfarben entfernt Dies ist ein Anwendungsfall der Eigenschaft von Feldregeln. Ich hoffe, jetzt ist es für dich klar. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Tutorial. 17. SVG-Gruppierungselemente: Hallo Leute. Schön , dich wieder zu sehen. In diesem Tutorial werden wir das Gruppieren von Elementen lernen. Fangen wir also mit dem Praktischen und versuchen zu verstehen, was es ist Hier kannst du sehen, ich habe bereits ein STML-Dokument erstellt. Und hier siehst du einen Container der D-Klasse. Und im Container erstelle ich ein SVG-Tag, und im VGTag erstelle ich bereits zwei rechteckige Formen Unsere erste rechteckige Farbe ist grün und unsere zweite rechteckige Farbe ist Uulu Wie Sie sehen können, überlappen sie sich gegenseitig. Und jetzt möchte ich beide Rechtecke drehen. Für diese werde ich eine Klasse zuweisen. Für unser erstes Rechteck ist unser Klassenname grün und für unser zweites Rechteck ist unser Klassenname gelb. In unserer Stilauswahl werde ich den Selektor erstellen Ich werde den Selektor erstellen, Punkt grün. Zuerst möchte ich das grüne Rechteck drehen. Dafür verwende ich die Transform-Eigenschaft. Transformieren und hier verwende ich den Drehwert, und ich möchte dieses Rechteck um 20 Grad drehen. Wenn ich diese Datei einstelle, können Sie hier sehen, dass sie das grüne Rechteck dreht. In ähnlicher Weise müssen wir, um dieses gelbe Rechteck zu drehen, einen weiteren Selektor, einen gelben Punkt, erstellen. Außerdem werde ich diese Transformationseigenschaft verwenden. Um 20 Grad drehen. Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Aber das Problem ist, dass wir dafür zusätzliche Arbeit leisten müssen. Zuerst müssen wir das grüne Rechteck drehen, und dann müssen wir das gelbe Rechteck drehen. Aber um dieses Problem zu lösen, können wir das Gruppierungselement verwenden Wir können beide Rechtecke zu einer Gruppe machen. Im Moment schneide ich dieses Rechteck aus und verwende das Gruppierungs-Tag, das ist G-Tag, G. In dieses G-Tag füge ich diese Rechtecke Das ist es. Außerdem werde ich einen Kurs für diese Gruppe belegen, die Gruppe ist. Jetzt heißt es also, eine Gruppe zu erstellen. Ich muss dafür kein anderes CSS eingeben. Ich werde ein CSS entfernen und diesen ausgewählten Namen durch Gruppe ersetzen. Wenn ich diese Datei hier einstelle, können Sie sehen, dass es keinen Unterschied gibt. Wenn ich den Rotationsgrad ändere, 30 Grad und die Datei, wie Sie hier sehen können, ändere ich, dass sie zusammen zu einem Reaktionselement bewegt wird. Jetzt verwende ich eine andere Eigenschaft, nämlich transform ausin Transform asin sent Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass sie unsere rechteckige Form in der Mitte der Seite dreht Wir können die Drehung beliebig steuern. Bei 50 Grad können wir das Ergebnis sehen. In ähnlicher Weise können wir die Stricheigenschaft gleichzeitig verwenden. Schlaganfall, gegessen. Wenn ich diese Datei eingestellt habe, siehst du jetzt einen roten Strich, beide vom T-Element. Wenn ich die Gruppenklasse verwende, wirkt sich das auf jedes Element innerhalb der Gruppe aus. Jetzt können Sie verstehen, was der Vorteil der Gruppierung ist. Ich hoffe, jetzt ist der Gruppen-Tag für Sie klar. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Tutorial. 18. SVG-Defs, Symbol- und Verwendungselemente: Hallo Leute. Schön , dich wieder zu sehen. In diesem Kurs werden wir lernen, wie SVG-Dips-Symbole Elemente verwenden Lassen Sie uns, ohne Ihre Zeit zu verschwenden, mit dem Praktischen beginnen. Hier können Sie sehen, dass ich Seite an Seite meinen Visual Studio Code Eator und meinen Browser mit der Life Server-Erweiterung öffne und ein SDML-Dokument öffne, und ein SDML-Dokument öffne das ich in unserem vorherigen Tutorial erstellt habe Hier können Sie sehen, dass ich eine Gruppe innerhalb des SVG-Tags erstelle. Und in diesem Gruppen-Tag erstelle ich zwei verschiedene Rechtecke. Jetzt ist die Situation so, dass ich wieder eine Gruppe von Objekten verwenden möchte , ohne die gleiche Menge an Code zu schreiben. Grundsätzlich möchte ich diese Gruppe von Formen mehrmals in unserem Viewportbereich verwenden . Dazu müssen wir diesem Gruppen-Tag eine ID zuweisen, ID entspricht, und unser Dnm ist Formen Nach dem G-Tag rufe ich dann Utag an. Lass es mich dir zeigen Im Hirsch ist unser erstes Attribut Link, Doppelpunkt HREF. Mit dieser Eigenschaft können wir die Gruppe zuweisen und müssen diese ID übergeben, um sie zuzuweisen. Kopieren und einfügen. Es wird diese Form in diesem Viewbook replizieren. Wie Sie sehen können, verwenden wir eine ID, daher müssen Sie das Hash-Tag angeben Jetzt müssen wir zwei Attribute übergeben, X-Attribut und das Y-Attribut. Mit diesem Attribut können wir eine neue Position für diese Formen definieren . Lass es mich dir zeigen. X gleich 30, Y gleich 20. Wenn ich diese Datei einstelle, können Sie hier sehen, dass sie eine weitere Rasur erzeugt, die genau dieser Form ähnelt, und wir können diese Rasur an einer beliebigen Stelle in diesem Ansichtsfeld platzieren Ebenso werde ich, wenn ich eine andere Form erstellen möchte, diese Linie duplizieren und die Koordinaten -30 -20 ändern die Koordinaten -30 -20 Wenn ich diese Datei einstelle, können Sie hier sehen, dass sie eine andere Form in entgegengesetzter Richtung erzeugt Denken Sie daran, dass dies unsere Arbeit relativ zu diesem Gruppen-Tag koordiniert . Wenn du zwei Rasuren unterschiedlich stylen möchtest, ist das mit dem G-Tag nicht möglich Dafür müssen wir ein anderes Tag verwenden, nämlich Deep Tag Zuerst müssen wir dieses G-Tag in das Deep-Tag verschieben. Lass es mich dir zeigen. Ich werde hier tief einsteigen. Ich werde dieses G-Tag in das Deep-Tag verschieben. Und Sie müssen an diesem G-Tag nichts ändern . Es bleibt gleich. Aber wenn ich diese Datei speichere, passiert etwas Seltsames. Lass es mich dir zeigen. Hier können Sie sehen, dass unsere exakte Formgruppe verschwunden ist Jetzt können wir diese Form nicht direkt verwenden. Dafür müssen wir unser Tag verwenden, und jetzt können wir diese Formen anders gestalten. Lass es mich dir zeigen. Denken Sie daran, dass wir an diesem Gruppen-Tag nichts ändern müssen Moment weise ich Klassen in unserem Use-Tag zu. Klasse A, Klasse B. Jetzt werde ich diesen Selektor in diesem Style-Abschnitt A erstellen , in diesen Spalten, ich werde eine Eigenschaft namens Stroke Dash Array verwenden Hier werde ich auch bestehen. Wenn ich diese Datei einstelle, können Sie den Unterschied zwischen zwei Formen erkennen. Eine Form hat einen durchgehenden Rand und eine andere Form hat einen gestrichelten Rand. Und wenn ich die Strichfarbe ändern möchte, können wir das auch. Blauer Strich. Aber bevor ich diese Datei einstelle, müssen wir den Strich aus dem Ursprung entfernen . Form bedeutet Gruppenform. Wenn ich diese Datei eingestellt habe, können Sie jetzt blaue Konturen in Objektformen der Klasse A sehen . Auf die gleiche Weise können Sie Formen der Klasse B gestalten. Lass es mich dir zeigen. Ich dupliziere diese Datei und ändere den Klassennamen B. Für Klasse B verwende ich Red Stroke. Ich ändere einen Strich in einen Zwischenraum. Fünf. Wenn ich diese Datei einstelle, siehst du hier den Unterschied zwischen zwei Formen. Lassen Sie uns zu unserem letzten Tag springen, der ein Symbol ist. Wir können das Symbol-Tag wie ein Gruppen-Tag verwenden. Lass es mich dir zeigen. Ich werde dieses Gruppen-Tag durch ein Symbol ersetzen. Es gibt einen Unterschied zwischen Gruppen-Tag und Symbol-Tag. Grundsätzlich kann ein Symbol eine andere Viewbox erzeugen . Lass es mich dir zeigen Ich werde dieses Symbol duplizieren und auch die zweite Form der ID ändern. Wenn ich diese Datei einstelle, kann ich hier sehen welchen Stil wir in unserer Gruppenklasse anwenden, jetzt sind sie alle nicht mehr anwendbar Jetzt werde ich das View-Feld wechseln. Lass es mich dir zeigen. Ich werde View Booxpperty verwenden Entspricht innerhalb der Doppelcodes Null, Null, 50, 50. Im Grunde wird es unsere Form skalieren. Wenn ich diese Datei einstelle, kannst du hier den Unterschied sehen. Das ist der grundlegende Unterschied zwischen Symbol und Gruppe. Wir können die Ansichten ändern, wenn wir den Symboltank verwenden. Wenn du es merkst, kannst du hier sehen, dass ich einen kleinen Fehler gemacht habe Wir verwenden in diesem Abschnitt nicht die zweite Form von ID. Ich werde das ID Form zwei nennen. Wenn ich diese Datei verwende, können Sie jetzt sehen, dass diese Viewox-Eigenschaft nur bei ID-Shapes funktioniert, nicht bei den Formen 2. Lassen Sie uns die Viewbox noch einmal um 150 mal 150 ändern. Wenn ich diese Datei eingestellt habe, können Sie jetzt das Ergebnis sehen. Es hat unser Symbolobjekt verkleinert. Wir können die Viewbox unterschiedlich ändern. Lass es mich dir zeigen Ich kopiere die Viewbox-Eigenschaft und füge sie hier ein, und hier werde ich 50, 50 ändern Wenn ich diese Datei einstelle, können Sie jetzt den Unterschied zwischen Viewboxen sehen. Und wenn Sie diese Viewbox verkleinern möchten, erhöhen Sie einfach den Wert dieser Viewbox 200 um 200 Wenn ich diese Datei eingestellt habe, siehst du hier die Objektansichtsbox Ich hoffe, jetzt ist es für dich klar, danke, dass du dir dieses Video angesehen Seien Sie gespannt auf unser nächstes Tutorial. 19. SVG-TextPath-Element-Tutorial: Hallo Leute. Schön dich wieder zu sehen. In diesem Tutorial werden wir etwas über das Textpfadelement lernen. Wenn Sie sich erinnern, haben wir in unseren vorherigen Tutorials Textelement und Pfadelement gelernt . Und wenn Sie ein Objekt mit Text und PAT erstellen möchten, müssen wir ein neues Tag verwenden, nämlich Textpfad. also, ohne Ihre Zeit zu verschwenden, Lassen Sie uns also, ohne Ihre Zeit zu verschwenden, mit dem Praktischen beginnen Hier können Sie nebeneinander sehen, dass ich meinen Visual Studio Coritor und meinen Browser mit der Lip-Servererweiterung öffne meinen Browser mit der Lip-Servererweiterung und bereits ein HTML-Dokument erstelle Und in diesem HTML-Dokument erstelle ich ein BG-Tag erstelle ich ein Und in diesem SVG-Tag habe ich ein View-Feld hundert mal hundert gesetzt Also werde ich zuerst einen Pfad erstellen. Lass es mich dir zeigen. Wie Sie wissen, müssen wir den Pfad mit dem D-Attribut beginnen. Also gebe ich D gleich C ein, dann müssen wir innerhalb der Doppelcodes den Befehl angeben. Als Nächstes müssen wir Xxs und YxS angeben, was 20 YX ist 50. Das ist unser Ausgangspunkt. Außerdem werde ich den Endpunkt für diesen Pfad wählen. Lass es mich dir zeigen. Unser Endpunkt ist 90 50. Außerdem werde ich Stroke Propriety verwenden. Schlag entspricht der Geschwindigkeit. Wenn ich diese Datei einstelle, siehst du hier eine Linie, und jetzt gebe ich diesem Strich einen Bogen. Dafür müssen wir einen Befehl verwenden. A, und dann gebe ich die Koordinaten 30 an und auch YxS ist 30, und dann müssen wir den X-Rotationswert angeben Im Moment werde ich es auf Null setzen. Außerdem ist unser großer Bogenwert Null, und dann müssen wir den Wert für das Suit-Flag angeben , der eins ist. Ich habe dir bereits in unseren vorherigen Videos erklärt wie wir mit diesen Attributen einen Bogen erstellen können. Wenn ich diese Datei einstelle, siehst du hier Arc. Im Moment möchte ich keine Farbe haben, also sage ich, fühle dich gleich wie keine. Schließlich erstellen wir die Bogenform, und jetzt verwende ich das Text-Tag. Lassen Sie mich es Ihnen zeigen. In diesem Text-Tag müssen wir ein weiteres spezielles Tag verwenden, nämlich Text Bath. Lass es mich dir zeigen. In diesem Text Bath werde ich einen Namen eingeben und einen Minch hinzufügen Wenn ich diese Datei einstelle, können Sie in unserem Ansichtsfeld nichts sehen. Weil wir diesen Text nicht mit diesem Pfad anhängen. Zuerst müssen wir diesem Pfad eine ID geben, Arc ARC entspricht. Jetzt können wir diese ID verwenden und jetzt können wir diese ID in unserem Textpfad zuweisen. Lassen Sie mich Ihnen für den Pontruse Xlink HRDF X-Link den Doppelpunkt HREF gleich innerhalb der Doppelcodes zeigen HRDF X-Link den Doppelpunkt HREF , und innerhalb der Doppelcodes müssen wir die Pfad-ID, den Hashtag ARC, angeben Wenn ich diese Datei einstelle, siehst du hier den Text, füge einen MGOur-Text hinzu und verschiebe ihn entsprechend dieser Kurve. Nicht nur das, wir können CSS-Eigenschaften für diesen Text verwenden. Dafür müssen wir eine Klasse verwenden, die dem Text entspricht. Jetzt erstelle ich den Selektor für diesen Text, Punkttext Im Inneren des entsteht zunächst, ich möchte die Schriftgröße ändern Schriftgröße 12 Pixel. Wenn ich diese Datei eingestellt habe, siehst du hier das Ergebnis. Reduziere die Textgröße. Und wenn Sie diesen Pfad nicht anzeigen möchten, möchten Sie nur diesen Text anzeigen. In diesem Fall müssen Sie das Dip-Tag verwenden. Lass mich dir Dips zeigen. Wenn ich diesen Pfad verschiebe und wenn ich diesen Pfad innerhalb dieses Dips-Tags verschiebe und diese Datei festlege, Sie jetzt den Strich nicht sehen, Sie können alles sehen, was dazu nötig ist. Wenn Sie die Bogenposition in die entgegengesetzte Richtung ändern möchten, müssen Sie nur den Swift-Stecker mit den Werten eins, zwei, null ändern und dann die fünf setzen Jetzt können Sie sehen, dass wir diesen Bogen in die entgegengesetzte Richtung bewegen. Jetzt werde ich einen Vale benutzen. Und stelle die Datei ein. Wenn du mit X-Koordinaten oder Y-Koordinaten mit R spielst, lass es mich dir zeigen. Ich werde 40 verwenden. Wenn ich diese Datei einstelle, können Sie jetzt eine andere Kurve sehen, und wir haben bereits in unseren vorherigen Videos davon erfahren. Wenn wir diese Form je nach Form ändern , ändert unser Text diese Position. Wenn Sie also diesen Pfad mit diesem Textpfad verknüpfen möchten, benötigen Sie eine ID, und dann müssen Sie das Ling-HID-Attribut verwenden , um diesen Pfad mit Text zu verknüpfen. Ich hoffe, jetzt ist das Textbad-Element für Sie klar. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial. 20. SVG-lineare Farbverläufe: Hallo Leute. Schön , dass du wieder da bist. In diesem Tutorial werden wir etwas über Farbverläufe lernen. Mal sehen, wie viele Arten von Farbverläufen wir haben. Hier können Sie sehen, dass wir zwei Arten von Farbverläufen in SVG haben: linearen Gradienten und radialen Gradienten Wie Sie sehen können, ist der lineare Farbverlauf direktional, vielleicht verläuft er rundum nach rechts, oben nach unten oder vielleicht diagonal, von oben nach unten oder vielleicht diagonal, aber unser radialer Farbverlauf hat eine kreisförmige Form Fangen wir mit der Praxis an und in diesem Tutorial lernen wir den linearen Farbverlauf kennen. Hier können Sie nebeneinander sehen, ich meinen Visual Studio-Codeor und meinen Browser mit der Lip-Servererweiterung öffne und meinen Browser mit der Lip-Servererweiterung Ich erstelle bereits ein HTML-Dokument, Indexpunkt-HTML, und ich verwende bereits Wisitag View Wox Hunderthundert und hier können Sie eine Rasterstruktur sehen Es ist sehr hilfreich, die Koordinaten zu verstehen. Zuerst werde ich eine rechteckige Form erstellen. Ich werde das Rec-Tag verwenden. Als Ausgangspunkt müssen wir XXs und YxS X gleich zehn und YxS gleich 30 angeben XXs und YxS X gleich zehn und YxS gleich , dann müssen wir innerhalb der Höhe gehen W 80 und Höhe gleich 60. Wenn ich diese Datei einstelle, siehst du hier eine rechteckige Form und jetzt werde ich diesem Rechteck einen Strich geben. Ich gebe einen Strich ein, der Geschwindigkeit entspricht. Jetzt können Sie diesen Strich in unserem Rechteck sehen. Im Moment möchte ich keine Farbe haben, also werde ich tippen, fühle mich gleich keiner. Jetzt möchte ich dieses Rechteck mit einer Verlaufsfarbe füllen. Es bedeutet mehr als eine Farbe. Dafür müssen wir Definitions-Tags mit Tiefen-Tags verwenden. In diesem Tiefen-Tag werde ich ein neues Tag verwenden, bei dem es sich um einen linearen Gradient handelt. Lass es mich dir zeigen. Außerdem nehme ich eine ID für diesen Tag, die ID, die innerhalb der Doppelcodes steht. L, unter Punkt G, bedeutet linearer Gradient In diesem linearen Gradienten-Tag werde ich ein anderes Tag verwenden, nämlich stop Sie müssen dieses Tag auf diese Weise schließen. In diesem Etikett deklarieren wir unsere Farbe. Aber zuerst müssen wir das Attribut mit dem entgegengesetzten Namen verwenden. Hier erklären wir , wo unsere Farbe beginnen soll, und ich möchte den Farbverlauf bei 0% beginnen. Für Farbe müssen wir eine weitere Eigenschaft verwenden , nämlich Stop-Color. Ich werde grüne Farbe verwenden. Dann werde ich diese Zeile duplizieren und das Gegenteil um 100% ändern. Außerdem werde ich die Farbe Blau ändern. Es ist hauptsächlich, es beginnt bei der Nullposition und endet bei der Position Hundert. In unserer Nullposition beginnt es mit grüner Farbe. Aber in Position 100 endet es mit blauer Farbe. Jetzt möchte ich den Verlaufseffekt in unserem Rechteck sehen. Aber zuerst werde ich dieser Form von rechteckigen Elementen eine Klasse zuweisen . Jetzt werde ich einen Selektor in der Punktform unseres Stilbereichs erstellen Punktform unseres Stilbereichs Im Inneren des Wagens werde ich eine Immobilie namens Film verwenden Und dann müssen wir die URL-Funktion verwenden. Und hier müssen wir die Gradienteneffekt-ID angeben , die underSCOG lautet Ich möchte diese ID kopieren, Hastag UnderCog muss auch die Feldeigenschaft von diesem Ort entfernen Wenn ich diese Datei einstelle, siehst du hier einen Farbverlauf. Hier kannst du sehen, wie es mit grüner Farbe beginnt und mit blauer Farbe endet. Wenn ich mit dem Offsite-Wert spiele, lasse ich dir 80% zeigen und stelle diese Datei Hier siehst du einen Bereich, der zu 80% mit blauer Farbe gefüllt ist. Auf diese Weise ist es also w. Im Moment werde ich 100 Personen verwenden. Als Nächstes haben wir eine weitere Eigenschaft , nämlich Stop-Opazität. Lass es mich dir zeigen. Wenn ich diese Eigenschaft verwende, diese Eigenschaft verwende, können Sie für Transparenz in dieser Farbe sorgen. Wenn ich den Wert Null verwende und dann die Datei festlege, können Sie hier sehen, dass sie völlig transparent ist. Wenn ich einen Wert verwende, kannst du hier Vollfarbe sehen. Wir können den Wert 0-1 verwenden. Ich werde 0,6 verwenden. Wenn ich diese Datei hier einstelle, können Sie sehen, dass sie jetzt halbtransparent ist. Jetzt ist die blaue Farbe zu 60% transparent. Aber vorerst werde ich einen Wert verwenden. Jetzt können Sie sehen, wie es mit Volltonfarbe gefüllt ist. Lassen Sie uns nun über die Gradientenrichtung sprechen. Hier können Sie sehen, wie unsere Farbe von links nach rechts geht, aber ich möchte diese Farbe von oben nach unten haben. Dafür müssen wir Xx Zu und YxSvuHe bestehen. Hier müssen wir zwei Arten von Xs und YxS verwenden: X eins, Y eins, X zwei, Y Lassen Sie mich Ihnen X zeigen, das gleich ist, aber keine Doppelcodes benötigt Ich gebe Null an Person für Y Eins weiter, außerdem werde ich Null Person verwenden. Und für N-Koordinaten ist der Wert X 100% und der Wert für Y zwei ist 0%. Wenn ich diese Datei einstelle, können wir hier sehen, dass es keine Änderungen gibt , da ich dieselbe Richtung für diese Verlaufsfarbe erstelle, und jetzt werde ich X auf Wert, Null und Y auf Wert 100 ändern . Wenn ich diese Datei eingestellt habe, können Sie hier sehen, dass sie die Richtung geändert hat. Jetzt geht es von oben nach unten. Und wenn du dafür die blaue Farbe oben haben willst, müssen wir die Werte ändern, null Person und Y eins ist 100%. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass zuerst die blaue Farbe und dann die grüne Farbe kommt. Wenn Sie die Farbe diagonal anzeigen möchten, müssen wir dafür den Wert ändern Y eins ist Null, Y zwei, 100%, X zwei, 100%, Y zwei, ebenfalls Wenn ich diese Datei sage, können Sie jetzt sehen, dass unsere Verlaufsfarben diagonal funktionieren In der Lippe und in der oberen Ecke können Sie grüne Farbe und rechten unteren Ecke blaue Farbe sehen Jetzt ist Ihnen klar, wie wir lineare Verlaufsfarben erzeugen können. Dazu müssen Sie zuerst den Effekt erzeugen. Und dann müssen Sie diesem Effekt eine ID zuweisen. Sie können diese ID im Eigenschaftswert des Feldes verwenden. Sie können diesen Farbverlauf auf jede Art von Form anwenden. Nicht nur das, wir können in diesem Farbverlauf mehrere Farben verwenden . Ich möchte diese Zeile duplizieren. Jetzt möchte ich orange Farbe verwenden. Und ich möchte diese Farbe in einer Position von 50% fühlen. Wenn ich diese Datei einstelle, kannst du hier den Effekt sehen. Hier können Sie sehen, wie es mit Grün beginnt , dann Orange und dann Blau. Sie können jede Farbe in einem beliebigen Prozentsatz verwenden. Wenn Sie für diese Farbe die Deckkraft angeben möchten, können Sie die Eigenschaft Stop-Opacity verwenden Das ist es für dieses Tutorial. Im nächsten Tutorial werden wir radialen Gradienten lernen. Danke, dass du dir dieses Video angesehen hast. 21. SVG-Radialverläufe: Hallo, Leute. Schön , dich wieder zu sehen. In diesem Tutorial werden wir etwas über den radialen Gradienten lernen. In unserem Preferds-Tutorial lernen wir bereits den linearen Gradienten kennen. Lassen Sie uns in den Visual Studio-Code springen und mit dem Praktischen beginnen. Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studio-Code-Editor und meinen Browser mit der Live-Servererweiterung, und ich habe bereits ein SML-Dokument erstellt zweite Punkt des Namens ist TML Und wie Sie sehen können, erstellen wir hier bereits eine rechteckige Form Jetzt möchte ich mithilfe des ID-Namens eine Verlaufsfarbe auf diese Form anwenden . Ich möchte diese Reaktionsform mit einer radialen Verlaufsfarbe füllen . Wie Sie wissen, müssen wir es dafür mit dem ID-Namen RG füllen Dafür fülle ich diese Reaktionsform bereits mit dieser ID, RG Rg steht für radialen Gradienten, und dann werde ich den radialen Gradienten innerhalb des Deep-Tags erstellen Gradienten innerhalb des Deep-Tags Lass mich dir zeigen, wie. In diesem tiefen Tag werde ich Radial Gradient eingeben. Ich glaube, ich habe einen Rechtschreibfehler gemacht DI ENT. In diesem radialen Gradienten müssen wir nun dieser ID, der Feld-ID, dem radialen RG-Tradialverlauf, zuweisen der Feld-ID, dem radialen RG-Tradialverlauf, Die Hämotyp-ID entspricht dem radialen Gradienten RG. Innerhalb dieses radialen Farbverlaufs weise ich nun die erste Farbe zu Hier werde ich das Stopp-Tag verwenden. Dann müssen wir die gegenteilige Position erwähnen. Ich werde das Opsete-Attribut verwenden. Umgekehrt bei Sind die doppelten Anführungszeichen, 0% bei der Position 0%, möchte ich die Stoppfarbe anwenden Stoppfarbe. Stoppfarbe entspricht, und ich möchte grüne Farbe anwenden. Dann werde ich diese Zeile duplizieren. Bei einer Position von 100% möchte ich rote Farbe auftragen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wenn Sie dieses React-Tag einrichten, können Sie sehen, dass wir einen radialen Farbverlauf haben. Es beginnt mit grüner Farbe und endet mit roter Farbe, und unsere grünen Farben beginnen in der Mitte. Stellen wir eine andere Farbe auf die Position 50% ein. Ich werde diese Linie duplizieren und bei einer Position von 50% möchte ich blaue Farbe auftragen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. So können Sie also so viele Farben hinzufügen, wie Sie möchten. Und wenn Sie die Position des Farbverlaufs ändern möchten , ja, das können Sie. Ich möchte dieses Verlaufszentrum nicht einfügen. Ich möchte es an diese Position verschieben. Um den Mittelpunkt des Gradienten zu verschieben, müssen wir die Attribute Cx und Cy verwenden. Der Hämatyp ch entspricht also 30%. Und dann werde ich die CY-Position anbieten. CY entspricht 40%. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wir haben die Gradientenposition erfolgreich verschoben. Wir können den Mittelpunkt des Gradienten an einer beliebigen Stelle in unserem React-Tag platzieren. Und wenn Sie Ihren Farbverlauf genau an der Laptop-Ecke beginnen , geben Sie einfach den Wert 0% XX und den Wert 0% YxS und stellen Sie dann diese Datei ein. Sie können das Ergebnis sehen Nicht nur das, Sie können auch den Gradientenradius steuern. Also werde ich es zuerst auf 50% Position, YXS und 50% Position XXs bewegen YXS und 50% Position XXs Dann verwende ich ein anderes Attribut namens R, R steht für den Radius R, der dem Gradientenradius entspricht, dem ich einen Gradientenradius von 20% geben möchte Im Grunde werde ich den Gradientenbereich reduzieren. In dieser Datei können Sie das Ergebnis sehen. Wenn Sie dafür Ihren Gradientenradius erweitern möchten, müssen Sie nur einen Wert von mehr als 50% angeben. Nehmen wir an, ich werde 90% überschreiten Nachdem ich diese Datei eingestellt habe, können Sie das Ergebnis sehen. Im Moment werde ich 20% verwenden. Da ich die Startfarbe des Farbverlaufs ändern werde. Ich möchte Grün durch Weiß ersetzen. Nach dem Ersticken können Sie das Ergebnis sehen. Lassen Sie uns nun mit dem Fokuspunktwert spielen. Ich möchte den Fokus dieses radialen Gradienten ändern. Dafür müssen wir ein Attribut namens H A X verwenden, weil ich den Fokus von x-Abzug auf 10% ändern möchte und ich möchte es anwenden Wenn Sie diesen Stapel aufstellen möchten, können Sie sich das Ergebnis ansehen. Dadurch wird der Fokus um 10% verändert , wenn die Richtung überschritten wird. Es ist immer noch ein radialer Farbverlauf, aber wir ändern nur den Fokuspunkt. Jetzt sieht es aus wie ein Blitzlichtstrahl, und um einen anderen Verlaufseffekt zu erzielen, müssen Sie mit diesen Werten spielen Angenommen, ich mache einen Radius von 40% Außerdem werde ich den Ex-Wert ändern und ihn auf 20% setzen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen und ähnlich wie bei der Fx-Position haben wir auch die FY-Position. Ich werde das FY-Attribut auf setzen und es auf 40% setzen. Nachdem Sie diese Datei eingerichtet haben, können Sie sehen, wie sie sich über den Fokuspunkt nach oben bewegt. Lassen Sie uns nun über das letzte Attribut mit dem rotierten radialen Gradienten sprechen , bei dem es sich um die Streumethode handelt. Dafür werde ich diese Zeile duplizieren und die vorherige Zeile auszählen Zuerst werde ich die Attribute AX und AY entfernen. Dann werde ich auch den Radiuswert entfernen. Dann werde ich diese Datei erneut einrichten. Dann nenne ich dieses Attribut Sprayed-Methode. Hemotidspray. Dieses Attribut umfasst den Gesamtwert C, Pad, Reflect und Wenn ich Pad verwende, ist es ein Standardwert vom Typ Sonu. Wenn ich diesen Wert verwendet habe und diese Datei festgelegt habe, gibt es, wie Sie sehen können , keine Änderungen, und dann verwende ich den nächsten Wert namens repeat Wenn ich diese Datei festlege, können Sie das Ergebnis sehen. Wenn ich den Gradientenradius reduziere, lasse ich dir R gleich 20% anzeigen und das hat diese Datei eingestellt, jetzt ist es für dich klarer, wie das funktioniert. Jetzt füllt es den Behälter mit wiederholbaren Verlaufsfarben Hier können Sie die Ebene mit wiederholtem Farbverlauf erkennen. Wenden wir nun das letzte V der Spread-Methode an, das flach ist. Ich werde Repeat durch Flat ersetzen. Bewerten Sie diese Datei, das ist es, was sie erzeugt. Jetzt erzeugt es überall im rechteckigen Feld ein reflektierendes Verlaufsmuster Ich möchte vorschlagen, dass Sie diese andere Kombination ausprobieren und einen anderen Verlaufseffekt erzielen. Wenn Sie jedes Mal mit diesem Wert spielen, wird ein anderes Ergebnis zurückgegeben. Das ist es für dieses Tutorial. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf das nächste Tutorial. 22. Adobe-Illustrator in Svg: Hallo Leute. Schön dich zu sehen. In diesem Tutorial werden wir lernen, wie wir jede komplexe Form zeichnen können, ohne ASV zu verwenden Für diese müssen wir eine beliebige vektorgrafische Anwendung verwenden. Wie Adobe Illustrator, Oral Draw, ansonsten können Sie jede andere vektografische Anwendung verwenden Und in diesem Tutorial werden wir Ado V Illustrator verwenden Mit Adobe Illustrator können wir komplexe geometrische Formen erstellen und diese Form dann in ein SVG-Docomin konvertieren. Lassen Sie uns also in die Adobe Illustrator-Software springen. Schließlich öffne ich die Adobe Illustrator-Anwendung. Dann müssen wir eine neue Datei erstellen. Um eine neue Datei zu erstellen, müssen Sie zu File Mino gehen und auf Neu klicken Dann können Sie viele Optionen sehen. Wir werden eine Datei für Webentwicklungszwecke erstellen, also wählen wir Web aus. Dann können Sie hier eine Menge Auflösung sehen. Dies sind alles Auflösungen für Webseiten, aber ich werde meine eigene Auflösung erstellen. Ich werde 200 mal 200 erstellen. Das ist unser Vavox-Gebiet. Wenn ich Tacon, Create-Option verwende, wird, wie Sie sehen können, ein Vevox-Bereich von 200 mal 200 Pixeln erstellt Das ist unser Viewbox-Bereich. In diesem Sichtfeld können wir jede Art von Form zeichnen. Um eine Form zu zeichnen , wähle ich zunächst dieses Werkzeug Es ist ein Pin-Tool. Mit diesem Schmerzwerkzeug können wir eine Strichlinie erstellen. Lass es mich dir zeigen. Nehmen wir an, ich möchte an dieser Stelle unseren ersten Punkt erstellen. Dies ist unser Ausgangspunkt und an dieser Position werde ich einen weiteren Punkt erstellen. Das ist unser Endpunkt. Wie Sie sehen können, entsteht eine gerade Linie. In diesem Fall funktioniert unser Schmerztool als Linienmarkierung. Und denkt daran, das ist unsere exzessive Richtung, und das ist die Richtung von YX Mit Pentool können wir auch eine kubische Bezierlinie erstellen. Lass es mich dir zeigen. Also unser Startpunkt an der Kubiksier-Linie ist dieser Punkt und unser Endpunkt an der belebteren Kubiklinie ist dieser Punkt Wenn ich an diesem Punkt darauf klicke und meine Maus ziehe, entsteht, wie Sie sehen können, eine Bezierlinie Das ist die kubische Bzial-Linie. Laut diesen View-Boards ist unser erstes Tag ein Linien-Tag und unser zweites Tag das Put-Tag Wie Sie wissen, können wir mit dem Put-Tag jede komplexe Form erstellen. Lass es mich dir zeigen. Jetzt werde ich komplexe Formen zeichnen. Wir werden an dieser Position beginnen. Dann erstelle ich einige Punkte und verdecke diesen Punkt und verbinde diesen Punkt Jetzt können Sie hier sehen, dass wir eine komplexe geometrische Form erstellen. Jetzt möchte ich diese komplexe Form mit einer Farbe füllen. Dazu müssen wir zuerst die Pfeiloption auswählen, dann müssen wir diese geometrische Form auswählen. Danach können wir von hier aus eine beliebige Farbe auswählen. Angenommen, ich möchte mit grüner Farbe füllen. Wie Sie sehen können, füllt sich unsere komplexe Form jetzt mit grüner Farbe. Wenn Sie die Strichfarbe dieser komplexen Form ändern möchten , ja, das können Sie. Wählen Sie einfach die komplexe Form aus. Dann müssen Sie die Option wählen. Dieses Mal müssen Sie die Option „Strich“ auswählen. Jetzt können Sie sehen, dass unser Strich ausgewählt ist und ich dem Strich die rote Farbe zuweisen möchte. Nachdem Sie die Farbe ausgewählt haben, können Sie das Ergebnis sehen. In VG können wir diese Form mit dem Pfadwerkzeug zeichnen, andernfalls mit dem Polygonwerkzeug. Das wissen wir bereits Und jetzt zeige ich Ihnen , wie Sie eine rechteckige Form erstellen können. Dazu müssen Sie diese Option, dieses Werkzeug, Rechteck auswählen. Dann müssen Sie die Startposition auswählen und darauf klicken und die Maus ziehen. Nachdem Sie die Maus gezogen haben, entsteht, wie Sie sehen können , eine rechteckige Form mit grüner Feldfarbe. Auch hier möchte ich die Feldfarbe ändern. Dazu müssen Sie zuerst die Feldoption auswählen, dann werde ich mit blauer Farbe füllen. Auf diese Weise können wir eine rechteckige, ansonsten eine quadratische Form erstellen . Wenn Sie eine Ellipform erstellen möchten, müssen Sie dafür das EllipeTol auswählen Elliptol verwenden, müssen Sie zuerst den Startpunkt auswählen, dann können Sie Ihre Maus ziehen Und für diese Ellipform verwende ich gelbe Feldfarbe Jetzt möchte ich dieses Bild konvertieren, dieses Adovillustrator-Bild in eine igraphische Grafik umwandeln Dazu müssen Sie die Dateioption auswählen. Dann müssen Sie Speichern unter auswählen. Option Upper Savers müssen Sie zunächst angeben, in welchem Ordner Sie Ihre Datei speichern möchten Dies ist der Ordner, in dem ich meine Datei speichern möchte, und dann müssen Sie auswählen , in welchem Format Sie die Datei speichern möchten Hier sehen Sie die Option „Als Typ speichern“. Von hier aus können Sie es als Illustrator-Datei als PDF-Datei speichern Illustrator-Datei als PDF-Datei Da Sie es als SVG-Datei speichern können. Ich werde diese Option verwenden, VG. Dann werde ich das Rd-Board benutzen, den R-Boot-Bereich verwenden. Wenn wir den Abood-Bereich nicht verwenden, werden Sie den Graubereich als Zeichenfläche Ich werde nur das rote Brett verwenden. Dann klicke ich auf die Option Speichern. Nachdem Sie die Option Speichern ausgewählt haben, sehen Sie hier viele Optionen. Sie müssen nichts ändern, Sie müssen weitere Optionen auswählen, und aus den Einstellungen für weitere Optionen müssen Sie die Option Erweitert auswählen. Und hier sehen Sie eine wichtige Option namens CSS-Eigenschaften. Und wenn ich dieses Drop-down-Menü öffne, können Sie hier das Präsentationsattribut, das Stilattribut und die Stilelemente sehen Stilattribut und die Stilelemente Im Moment möchte ich diese Datei mit Stilelementen speichern diese Datei mit Stilelementen Und dann drücke ich Fok. Und wenn ich Ihnen mein aktuelles Arbeitsverzeichnis zeige, wie Sie in meinem aktuellen Arbeitsverzeichnis sehen können, gibt es ein Igifile namens Untitle 01, und jetzt werde ich dieselbe Datei in eine andere Sass-Eigenschaft setzen dieselbe Datei in Lass es mich dir zeigen. Auch hier klicke ich auf das Dateimenü, dann lobe ich Sabas und wähle den Atwood-Bereich und benenne die Datei in Bild zwei um Bild zwei. Dann wähle ich die Option Sab. Aber dieses Mal werde ich kein Stilelement auswählen. Dieses Mal werde ich Stilattribute verwenden und diese Datei festlegen. Und wenn ich Ihnen jetzt mein aktuelles Arbeitsverzeichnis zeige, müssen Sie, wie Sie jetzt sehen können, mit AWG Image sprechen Für mein erstes Bild verwende ich hier die Eigenschaften von Stilelementen. Und für das zweite Bild verwende ich Stilattribute. Und jetzt öffne ich War of My Image mit meinem Browser. Also hier öffne ich den Chrome-Browser und in diesem Chrome-Browser öffne ich dieses Bild. Wie Sie sehen können, können Sie das genaue Bild sehen, das ich in meiner auf Atov gelisteten Software erstelle und Sie können die Erweiterung sehen Es ist ein AWG-Bild. Und jetzt zeige ich Ihnen den Quellcode und Sie können verstehen, was der Unterschied zwischen diesen beiden Bildern ist zwischen diesen beiden Bildern Beide Bilder werden das gleiche Ergebnis zurückgeben. Es gibt keine Änderungen, aber wenn ich beide Bilder in meinem Code-Editor öffne, zeige ich es Ihnen zuerst, ich öffne und Titelpunkt eins ist WiGi, dann öffne ich Bild zwei Punkt eins ist Vigi. Wie Sie wissen, verwenden wir für Bild zwei, Bild zwei, Stilattribute In diesem Bild wird, wie Sie sehen können, zuerst VBox Stag verwendet Wie ich Ihnen bereits gesagt habe, erstellen wir ein Sichtfeld von 200 mal 200 Dann erstellen wir ein Linien-Tag. Dann erstellen wir ein Put-Tag und mit Put-Tag erstellen wir eine gekrümmte Linie. Dann verwenden wir ein Polygon-Tag , um die komplexe geometrische Form zu erstellen, und dann verwenden wir ein React-Tag Endlich verwenden wir ein Circle-Tag. Denken Sie daran, dass wir beim Einstellen dieser Datei das Style-Attribut verwenden. Aus diesem Grund wird die Inland-Styling-Methode verwendet. Aber wenn ich Ihnen mein erstes Bild zeige, in dem ich das Style-Element verwende, wurde, wie Sie sehen, dasselbe Tag verwendet, aber es verwendet keine Inland-Styling-Methode. Es verwendet Linienelement, Butt-Tag, Polygon-Tag, React-Tag und Kreis-Tag Alle Tags sind gleich, aber für das Styling werden Stilelemente verwendet Es verwendete Klassennamen, um die Elemente zu stylen, und es folgt nicht der Inland-Stilmethode. Das ist der Unterschied zwischen zwei Dateien, aber beide Dateien werden dasselbe Ergebnis zurückgeben. Denken Sie daran, wenn wir ähnliche Füllfarbe und eine ähnliche Konturfarbe verwenden, wird in diesem Fall derselbe Klassenname verwendet. Es wird beiden Elementen denselben Klassennamen zuweisen. Aber wenn wir eine der Eigenschaften ändern , sonst die Füllfarbe, sonst die Strichfarbe, dann wird es einen anderen Klassennamen verwenden. In diesem Fall ist es, wie Sie sehen können, bei eins. Und all die Attribute und Punkte, die Sie in diesen Tags erkennen können, kennen Sie bereits. Sie kennen bereits X einen Punkt, X Y einen Punkt, X zwei Punkte und einen Y-Zweipunkt. Das ist unser Startpunkt und das ist der Endpunkt. Sie kennen sich mit Punkten, Höhe, Breite, Radius, Kreis Y und Kreis X usw. aus. Ich werde es hier nicht erklären. Es liegt an Ihnen, welche Art von Format Sie wählen werden : CSS-Attribut, andernfalls CSS-Element. Aber ich persönlich würde empfehlen, das CSS-Element zu verwenden , da es übersichtlicher ist und es sehr einfach ist, es zu essen. In diesem Tutorial versuche ich Ihnen physisch beizubringen, wie wir eine ktrografische Form in ein SVG-Bild konvertieren können ktrografische Form in ein SVG-Bild Ansonsten ist die Adobe Illustrator-Software ein großes Thema. Wir können dieses Thema nicht in einem Video behandeln. Wenn Sie sich an diese Rasterstruktur erinnern, die ich in jedem Tutorial zur Berechnung der Punkte verwendet habe, erstelle ich diese Rasterstruktur mit AdovIllustrator, extrahiere einfach den SVG-Code und verwende extrahiere einfach den SVG-Code und Das ist also die einfache Einführung von Adv Illustrator Sofa, und es gibt noch andere Software und Online-Tools Das kann die Victor-Grafik in ein SVG-Bild konvertieren. Hier können Sie mit Ado Illustrator Softa komplexe Bilder erstellen und diese in ein SVG-Bild konvertieren In unserem kommenden Tutorial werden wir mit der AdoVillstrator-Software ein komplexes Bild erstellen AdoVillstrator-Software ein komplexes Bild erstellen Das ist es also für dieses Tutorial. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf das nächste Tutorial. 23. Svg ClipPath-Animation: Hallo, Leute. Schön , dich wieder zu sehen. In diesem Tutorial werden wir lernen, was das Kipput-Tag in SVG ist Versuchen wir zu verstehen, was ein Kipp-Tag ist. Ich kehre zu meiner Adobe Illustrator-Software zurück. Hier können Sie zwei Formen sehen. Wie Sie sehen können, hat unser erster Koch Form eines Herzens und unser zweiter Koch hat die Form eines Kreises. Wenn ich die Form überschneide und beide Formen auswähle und dann nach rechts drücke , siehst du die Option Schnittmaske erstellen Wenn ich drücke, siehst du hier, wie es den überlappenden Bereich entsprechend der Herzform ausschneidet den überlappenden Bereich entsprechend der Herzform Jetzt ist die Kreisform nur innerhalb der Herzform sichtbar Wenn ich die Kreisform innerhalb der Herzform verschiebe, können Sie hier verschiedene Ergebnisse sehen. Wir können die Kreisform innerhalb der Herzform verschieben , so ähnlich. Nicht nur das, wir können es verkleinern und animieren. In ähnlicher Weise haben wir das Schlagwort in VIG beibehalten. Bevor ich mit dem Praktikum anfange, möchte ich Ihnen eine Sache zeigen. Hier siehst du eine harte Form in der Viewbox und ich extrahiere bereits den Wig-Code aus diesem Bild Wie Sie wissen, müssen wir das Put-Tag verwenden, um diese Form zu erstellen. Lassen Sie uns in den Visual Studio-Code-Editor springen und versuchen zu verstehen, wie er funktioniert. Hier können Sie nebeneinander sehen, ich meinen Visual Studio-Code-Editor und meinen Browser mit der Light-Server-Erweiterung öffne und bereits ein STML-Dokument erstelle Das ist unser Problem, das durch dieses Butt-Tag verursacht wird, und ich weise diesem Butt-Tag bereits eine ID zu, was schwierig ist Zuerst werde ich vor dem Butt-Tag einen Kreis erstellen. Ich werde einen Kreis binden. Wie Sie wissen, müssen wir drei Attribute verwenden, um einen Kreis zu erstellen . Unser erstes Attribut ist Cx, CX entspricht 40. Unser nächstes Attribut ist CY, CY entspricht 35, und unser letztes Attribut ist das Radius-Attribut. Für das Radius-Attribut müssen wir R verwenden, R entspricht vorerst, ich werde 35 verwenden. Wenn ich diese Datei einstelle, kannst du hier diesen Kreis sehen. Standardmäßig ist es schwarz und das weißt du. Jetzt verschiebe ich diesen Kreis innerhalb des Cliput-Tags. Ich werde Clip PT eingeben. Ich werde diesen Kreis innerhalb des Clipper-Tags verschieben. Ich werde diesem Clipper-Tag eine ID zuweisen. Lass mich dir die ID zeigen, die meinem Clip entspricht. Wenn ich diese Datei einstelle, können Sie jetzt sehen, dass unser Kreis verschwunden ist, und jetzt möchte ich diesen Kreis auf der Innenseite der Herzform zeigen , nicht außerhalb der Herzform. Dafür müssen wir ein Tag verwenden, das heißt verwenden. Ich werde Use binden. Und dann müssen wir einige Attribute verwenden , um diese Maske zu erstellen. Unser erstes Attribut, unser erstes Attribut, ist der Clip-Pfad, was der URL innerhalb der Doppelcodes entspricht. Dann müssen wir in dieser Klammer die ClipPt-Tag-ID, das Hash-Tag, meinen Clip angeben Clip Jetzt müssen wir diesen Clip-Pfad mit dieser Schwierigkeit verknüpfen. Dafür müssen wir ein anderes Attribut verwenden, und das weißt du, nämlich xlink HRD. Lass es mich dir zeigen Der Doppelpunkt HRDF entspricht dem Wert innerhalb der Downcodes. Wir müssen diese aber technische ID angeben, was schwierig ist. Ich gebe has tag hard ein und gebe auch eine Feldfarbe an , die rot ist. Wenn ich diese Datei eingestellt habe, können Sie hier das Ergebnis sehen. Es schneidet die Kreisform entsprechend der Herzform ab. Dies ist der Hauptanwendungsfall von Clip But Tag. Wir können den Kreis innerhalb dieser Herzform gruppieren. Wir können den Kreis innerhalb dieser Herzform und vieles mehr animieren innerhalb dieser Herzform und vieles mehr Lassen Sie uns die Kreisform innerhalb dieser Herzform animieren, und dafür gebe ich bereits etwas CSS-Code ein. Lass es mich dir zeigen Hier siehst du, ich erstelle ein Keyframe namens open your heart. In diesem Keyframe beginnt unser Herz bei Radius Null und skaliert bis zu einem Radius von 60 Pixeln Und hier wählen wir unsere Kreisform mithilfe von CSS-Selektoren aus. Hier können Sie in meiner CLP-ID sehen, dass wir ein Kreis-Tag haben. Deshalb verwende ich zuerst My Clif und dann Circle Tag Und dann nenne ich unsere Animation, was Open Your Heart ist Ich möchte diese Animation fünf Sekunden lang laufen lassen und ich möchte diese Animation unendlich lang abspielen Deshalb verwende ich Infinite Value. Ich hoffe, Sie haben bereits Grundkenntnisse über SASS-Animationen Wenn ich diese Datei eingestellt habe, kannst du hier die Animation sehen. Alle fünf Sekunden wird unsere Animation ausgeführt. Ich hoffe, du verstehst jetzt, was Flip-Tag verwendet wird. Danke, dass du dir dieses Video Bleib dran und bleib dran für unser nächstes Tutorial. 24. Hinzufügen von JavaScript in einem Svg-Bild: Hallo Leute. Schön dich wieder zu sehen. In diesem Tutorial werden wir lernen, wie wir Scripting in Vigiimage hinzufügen können Angenommen, Sie möchten die Objektgröße und ihren Pfad ändern, einfach eine Clique verwenden, dann müssen wir dafür JavaScript verwenden Hier können Sie in unserem Ansichtsfeld sehen, dass wir eine rechteckige Form haben, und Sie können auch eine Schaltfläche unter dem Ansichtsfeld sehen. Und jetzt möchte ich dieses Rechteck skalieren, indem ich auf diese Schaltfläche klicke, ungefähr so Dafür müssen wir JavaScript verwenden. Lassen Sie uns in den Visual Studio-Koordinator springen und versuchen zu verstehen, wie wir JavaScript in das Wii-Bild einfügen können Hier können Sie Seite an Seite sehen, ich meine Bilder mit der B-Servererweiterung für Codaor und meinen Browser öffne und meinen Browser Wie Sie sehen können, erstelle ich bereits ein externes Dokument und in diesem EML-Dokument erstelle ich einen Klassencontainer erstelle ich einen In dieser Tiefe erstelle ich ein SVG-Bild. In diesem VG-Bild können Sie auch eine rechteckige Form sehen. Welche ID ist g. Dann bauen wir außerhalb dieses Containers tief ein weiteres Klassenzentrum. In dieser Tiefe erstelle ich einen Button. Welche ID ist eine Schaltfläche. Sie können diese Schaltfläche auch in meinem Browser sehen. Und jetzt möchte ich meine Rechteckform skalieren , wenn ich diese Taste drücke. Für diese müssen wir JavaScript verwenden. Wie Sie wissen, müssen wir dafür das Script-Tag verwenden. Lass es mich dir zeigen. Schrott. In diesem Skript-Tag werde ich eine Funktion erstellen und unser Funktionsname ist Scale Size Zuerst verwende ich das Funktionsschlüsselwort und unser Funktionsname ist Scale Size. In der Klammer möchte ich vorerst keinen Parameter übergeben Dann müssen wir innerhalb der Schnitzer die ID dieses Rechtecks auswählen Dokument, Punkt, Element nach ID abrufen, innerhalb der Klammern und innerhalb des doppelten Kurs- oder ID-Namens, was ein ist, und jetzt möchte ich die Breite dieses Rechtecks skalieren Wir müssen das mit einem Attribut skalieren . Ich werde eine Funktion, einen Punkt, ein Set, ein Attribut verwenden. Statt der Klammern, statt der Dole-Codes, müssen wir zuerst den Attributnamen übergeben und unser Attributname und unser Attributname Komma und dann müssen wir den Wert übergeben und ich möchte bis zu 50 Pixel skalieren, also übergebe ich 50, dann Semikolum, dann Semikolum In ähnlicher Weise möchte ich die Höhe dieses Rechtecks skalieren, also werde ich diese Zeile duplizieren und diesmal lautet unser Attributname Also werde ich es durch eine Höhe ersetzen , die 40 Pixeln entspricht. Also, wann immer ich auf diese Schaltfläche klicke, möchte ich diese Funktion ausführen. Dafür müssen wir ein anderes Attribut verwenden, nämlich n click. Und innerhalb dieser Doppelcodes müssen wir den Funktionsnamen übergeben , der Skalengröße ist. Also möchte ich den Funktionsnamen kopieren und hier einfügen. Und jetzt werde ich diese Datei einrichten und diesen Code ausführen. Hier kannst du das Ergebnis sehen. Es skaliert unser Rechteck perfekt. Lass es mich dir noch einmal zeigen. Wenn ich meinen Browser neu lade, seht ihr dort jetzt unser Rechteck mit diesen 30 biiXL und einer Höhe von 20 Pixeln Immer wenn ich auf diesen Button klicke, skaliert er das Rechteck Jetzt sind es 50 Pixel und die Höhe beträgt 40 Pixel. Mit JavaScript können wir unsere Form animieren, wir können unsere Form bewegen Du kannst alles tun , was du willst. Mit der Skalierung möchte ich jetzt die Form in YxS verschieben. Oder dass Sie den YXS-Wert ändern müssen. Lass es mich dir zeigen. Ich werde diese Zeile noch einmal duplizieren. Aber dieses Mal werde ich hier das Y-Attribut auswählen. Y. Ich möchte dieses Rechteck um 30 Pixel in Y-Richtung bewegen dieses Rechteck um 30 Pixel in Y-Richtung Wenn ich diese Datei einstelle und dann auf diese Schaltfläche klicke, können wir hier sehen, dass sie zuerst unser Rechteck skaliert und dann unser Rechteck in YxS-Richtung verschiebt Ich hoffe, dir ist jetzt klar, wie wir JavaScript mit XVGImages verwenden können Die Verwendung von JavaScript mit CSS und die Verwendung von JavaScript mit VIG sind Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Tutorial, und dann werden wir mit unseren spannenden Übungen und Projekten beginnen . 25. Animation des bewegten Autos: Hallo, Leute. Schön , dich wieder zu sehen. Von diesem Tutorial aus werden wir unser Projekt starten. Dies ist unser erstes Projekt, und unser Projektname ist Moving Car. Hier kannst du ein Auto sehen. Es ist ein vollständiges SVG-Bild. Dies ist keine TML-Seite, und Sie können sie in meiner SVG-Datei mit URL-Balkenpunkt sehen Laden wir also meinen Browser neu und sehen, was passiert ist. Hier können Sie sehen, wie sich unser Auto von rechts nach links bewegt. Und wenn du merkst, kannst du sehen, wann unser Auto angehalten hat, es stoppt auch unsere Räder. Das ist also die sehr spannende Animation. Schauen wir uns also an, wie wir diese Animation erstellen können. Hier können Sie also nebeneinander sehen, ich mein aktuelles Arbeitsverzeichnis und meinen Browser öffne. Wie Sie sehen können, gibt es in meinem aktuellen Arbeitsverzeichnis eine Viz-Datei, der gute Name ist Jeb Cabrio Ich öffne diesen Namen als VG-Datei in meinem Browser, und hier können Sie Jetzt werde ich in die Adoviillstrator-Software springen . Lass es mich dir zeigen. Hier können Sie sehen, dass ich dasselbe SVG-Bild auch in AdovIllustrator öffne Jetzt werde ich eine neue SVG-Datei erstellen. Dafür müssen wir zuerst eine neue AI-Datei erstellen. Ich klicke auf diesen Dateiabschnitt und dann auf Neu. Ich möchte unseren Viewportbereich mit voller SG-Auflösung erstellen mit voller SG-Auflösung Deshalb werde ich die Auflösung 19 20.080 verwenden. Das ist unser View-Wok-Bereich. Jetzt werde ich dieses Auto in diesen Raum schleppen. Ich werde dieses SVG-Bild ein wenig vergrößern. Und jetzt werde ich diese Datei als AVG einrichten. Dazu klicke ich auf den Dateibereich und drücke dann auf Speichern unter. Ich werde diese Datei in meinem aktuellen Arbeitsverzeichnis ablegen und auch den schönen Namen ändern , der Moving Car Underscore Car lautet Jetzt wähle ich den Dateityp aus, der VG ist. Dann wähle ich die Option Us Artboard und drücke dann auf Speichern Ich würde gerne die Eigenschaften von Stilelementen verwenden. Ich werde auf Okay drücken. Hier können Sie in meinem aktuellen Arbeitsverzeichnis sehen, ein weiteres VG-Bild gibt, das sich bewegt und den Unterstrich Auto 01 unterstreicht Wenn ich dieses Bild in meinem Browser öffne, kannst du das Bild hier sehen In dieser Übung möchte ich nicht mit einer HTML-Seite arbeiten. Ich arbeite direkt mit SVG-Bildern. Lassen Sie uns in den Visual Studio-Koordinator springen und versuchen, die Animation zu erstellen. Endlich bin ich wieder meinem Visual Studio Codiator öffne auch die SVG-Datei für bewegte Autos Und hier können Sie sehen, dass wir insgesamt drei Put-Tags haben. Unser erstes Butt Tag ist für unsere Karosserie. Unser zweites Stoßschild ist für das Vorderrad eines Autos und unser drittes Etikett für das Hinterrad eines Autos. Zunächst weise ich unserer Karosserie einen Klassennamen zu, der der Karosserie des Autos entspricht Ich werde einen Selektor mit diesem Klassennamen erstellen. Ich werde diesen Namen kopieren und hier werde ich das Style-Tag verwenden Ist dieses Style-Tag, Punkt, unser Klassenname. Ist der CaliveRF, bei dem ich die Karosseriefarbe ändern möchte. Dafür verwende ich die Feldeigenschaft. Für die Körperfarbe werde ich rote Farbe verwenden. Wenn ich diese Datei einstelle und meinen Browser neu lade, können Sie hier sehen, dass wir die Karosseriefarbe erfolgreich geändert Unsere nächste Aufgabe ist es, die Räder um 360 Grad zu drehen die Räder um 360 Grad zu Dafür müssen wir das Animate Transformation Tag verwenden. Lass es mich dir zeigen. Wir müssen das Animate-Transformations-Tag innerhalb des PT-Tags verwenden Dafür müssen wir das Closing-Butt-Tag verwenden. P. Zuerst gebe ich den Tag-Namen ein , der animate transform lautet Außerdem müssen wir das Tag beenden und dann einige Eigenschaften verwenden Unser erster Eigenschaftsname ist Attributname. Lass es mich dir zeigen. Unser Attributname ist Transform. Wenn Sie mit CSS-Animationen vertraut sind, hören Sie diesen Sound oft. Unser nächster Eigenschaftsname ist Attributtyp. Und unser Attributtyp ist XML. Wir wissen bereits, dass unser SVG-Bild mit XML-Tags erstellt wurde. Aus diesem Grund ist unser Attributtyp XML, und dann müssen wir den Animationstyp angeben, wobei der Typ gleich ist, und unser Animationstyp ist Rotation. Ich gebe Rotate ein. Und dann müssen wir von Wert und zwei Werten von 360 Grad und in unseren beiden Werten auf Null Grad übergehen zwei Werten von 360 Grad . Dann müssen wir die Dauer DUR angeben, die entspricht, und ich möchte diese Animation drei Sekunden lang laufen lassen , dann müssen wir die Wiederholungszeit dieser Animation angeben . Dafür müssen wir eine weitere Eigenschaft verwenden , nämlich repeat coum. Entspricht, und ich möchte diese Animation 1,35 mal wiederholen diese Animation 1,35 mal Das hängt ganz von dir ab. Wie lange möchtest du deine Animation wiederholen? Wenn ich diese Datei einstelle, dreht sie unser Rad, aber wir geben nicht den Nabenpunkt dieses Rades an. Deshalb wird es ein anderes Ergebnis behalten. Lass es mich dir zeigen. Wenn ich diese Datei neu lade, kannst du hier das Bild sehen Es dreht unser Rad entsprechend dem Punkt Null X xs. Wir müssen die exakten Koordinaten dieser Radnabe übergeben , um den exakten Wert dieses Nabenpunkts zu erhalten Wir müssen zur Adovillstrator-Anwendung zurückkehren Also bin ich wieder bei meiner AdovillsTror-Anwendung. Jetzt müssen wir den genauen Nabenpunkt dieses Rades finden. Ich werde dieses Rad auswählen. Und hier können Sie den Xs-Punkt dieses Rades und den YX-Punkt dieses Rades sehen dieses Rades und den YX-Punkt dieses Rades Ich werde den XXSpoint kopieren. Wenn Sie feststellen, dass Sie das Dezimaltrennzeichen nach oben sehen können , fängt es mit sieben an Es bedeutet, dass es über 0,5 liegt. Dafür können wir 753 Punkte verwenden. Wie Sie sehen können, ist unser YxS-Punkt 500. Kehren wir zum Visual Studio-Codaor zurück und weisen den XS-Punkt und den YXS-Punkt Also müssen wir den XXS-Punkt an dieser Stelle bereitstellen. 753 und unser XS-Punkt ist 500 und außerdem müssen wir an dieser Position denselben Wert zuweisen Wenn ich diese Datei einstelle und dann meinen Browser neu lade, können Sie jetzt sehen, wie er unser Rad genau an der richtigen Stelle dreht und unsere Animation drei Sekunden lang ausführt Wir müssen das gleiche Verfahren für unser Hinterrad befolgen Zuerst werde ich das P-Tag schließen. Und dann kopiere ich denselben Animationscode und füge ihn hier ein. Und wieder müssen wir den genauen Punkt für unser Hinterrad angeben . Jetzt müssen wir wieder zur Adobe Illustrator-Software Diesmal klicke ich auf Hinterrad und hier siehst du die Position, 970 Xxs und 500 YxS Gehen wir zurück zum Codeditor. Unsere XXS-Koordinate ist 917 und unsere YXS-Koordinate ist 500. Außerdem müssen wir an zwei Positionen ersetzen . Wenn ich diese Datei einstelle und dann diesen Browser neu lade, können Sie hier sehen, wie er unsere beiden Räder in dieselbe Richtung dreht Wenn Sie diese Richtung ändern möchten, müssen Sie bei Null und 2360 Grad beginnen Sie müssen nur die Koordinatoren umkehren, fertig. Wir haben unseren Dreh- und Angelpunkt erfolgreich erledigt, und jetzt müssen wir das ganze Auto von rechts nach links bewegen . Wie ist das möglich? Hier können Sie sehen, dass ein Gruppen-Tag G-Tag bedeutet, und unser G-Tag enthält alle drei Put-Tags. Wir müssen das G-Tag von rechts nach links bewegen. Ich werde das Animations-Tag noch einmal kopieren. Also füge Tag ein, und vor dem schließenden G-Tag füge ich es ein. Für diese Animation benötigen wir keinen Wert für „ Von“ und „Bis“, also werde ich ihn entfernen. Und wir müssen auch den Typwert ändern. Dafür werde ich Translate verwenden. Ich möchte nicht mein ganzes Auto drehen. Ich möchte nur die Position des Autos ändern. Deshalb verwende ich Translate. Ich möchte diese Animation nicht wiederholen, also werde ich eine verwenden. Und dann müssen wir den Startpunkt und den Fahrzeug-Endpunkt und den Fahrzeug-Endpunkt angeben . Dafür verwende ich eine Eigenschaft namens values. Werte, die innerhalb der Doppelcodes liegen. Zuerst müssen wir die Start-X-Koordinate und die Y-Koordinaten angeben . Standardmäßig ist unsere Kurvenposition Null. Ich möchte dieses Auto aus einer Entfernung von 400 Pixeln starten, unser X X-Wert ist 400 und unser Y X-Wert ist Null. Doppelpunkt. Wir müssen den Endpunkt angeben. Für unseren Endpunkt möchte ich diese Karte in der absoluten Position stoppen. Deshalb werde ich die Koordinate Null und auch die Y-Koordinate Null übergeben . Wenn ich diese Datei einstelle und diesen Browser neu lade, hey, es funktioniert nicht Vielleicht liegt ein Fehler vor. Hey, ich habe vergessen, nach dem Endpunktwert ein Semikolon anzugeben. Wenn ich diese Datei einstelle und meinen Browser neu starte, hey, es Lass uns das Problem herausfinden. Lassen Sie uns die Dauer für eine Sekunde ändern. Außerdem werde ich die Werte ändern. Ich ändere nur den Startpunktwert. Wenn ich diese Datei einstelle und meinen Browser neu lade, kannst du hier sehen, wie es jetzt funktioniert Ich lasse unser Auto fahren und es hat auch unsere Räder geroutet. Wenn unsere Autos anhalten, stoppen sie auch die Räder. Wir bewegen unser Auto erfolgreich von einem Punkt zum anderen. Ich hoffe, jetzt ist dir klar , wie es funktioniert hat. Danke, dass du dir dieses Video angesehen hast und bleib dran für unser nächstes Projekt. 26. Svg-Pfad-Tracking-Animation: Hallo Leute. Schön dich wieder zu sehen. Dies ist unsere zweite SVG-Animation zu einer Übung, und unser Übungsname ist Path Tracking Animation. Schauen wir uns das Beispiel an. Was können wir mit dieser Animation machen? Hier können Sie die Weltkarte sehen, und jetzt entscheiden Sie sich, eine Lieferung von New York nach Kalkutta zu schicken eine Lieferung von New York nach Kalkutta zu Und auf diesem Weg wird das Schiff das Ziel erreichen Wenn ich diesen Browser neu lade, können Sie die Animation sehen. Sie können sehen, wie unser Containerschiff diesem Weg folgt und sein Ziel erreicht Wie Sie sehen können, läuft der rote Punkt über den blauen Pfad. Lassen Sie uns also mit dem Praktischen beginnen und versuchen zu verstehen, wie wir dieses Beispiel erstellen können. Hier können Sie sehen, dass ich wieder bei meiner Adovilustrator-Software bin meiner Adovilustrator-Software und auch das Malwerkzeug auswähle Und wie Sie sehen können, drehe ich meine Feldfarbe auf. Ich verwende nur Strichfarbe und unsere Strichfarbe ist Blau. Und unsere Auffassung von der Auflösung ist 1920 5.080. Also werde ich zuerst einen Kurvenstrich zeichnen, so etwas. Das ist es. Das ist der Weg, den ich in unserem Projekt verwenden werde. Wenn Sie die Strichbreite erhöhen möchten, können Sie den Pfad auswählen und dann verwende ich zwei PT-Werte für unseren Strich. Jetzt sieht es perfekt aus. Jetzt müssen Sie den AVG-Code aus diesem Bild extrahieren. Dazu müssen wir auf die Dateioption klicken und dann speichern. Dann müssen Sie dieser Datei einen Namen zuweisen. Ich werde Demo verwenden. Außerdem müssen Sie den Dateityp auswählen, nämlich SVG. Dann wähle ich die Option „ Zeichenfläche verwenden und drücke dann auf Speichern Hier können Sie viele Optionen sehen. Alles bleibt gleich. Sie müssen das CSS-Eigenschaftsstilelement verwenden und dann auf Okay klicken, um diese Datei zu speichern. Kehren wir zum Visual Studio Creator zurück und sehen wir uns an, welche Art von Attribut wir aus diesem SVG-Code erhalten. Endlich bin ich wieder bei meinem Visual Studio Creator, und hier können Sie mein Verzeichnis sehen Es gibt ein VG-Bild namens Demo Dot VG. Wenn ich dieses Bild öffne, können Sie hier einige Codes sehen. Wie Sie sehen können, ist unsere Viewfo-Größe 1920 5.080. Im SVG-Tag befindet sich ein PAT-Tag, das ich in der Adovillustrator-Software erstelle. Die PAT-Klasse ist ST Die Sie können auch die CSS-Eigenschaft dieses PAT sehen. Und wenn ich dieses Bild in meinem Browser öffne , können Sie das Ergebnis sehen. Es ist nur ein SVG-Pfad, sonst nichts. Also bin ich wieder bei meinem Result Studio Creator. Zuerst werde ich ein HTML-Dokument mit dem Namen Index Dot HTML, Index Dot HTML erstellen dem Namen Index Dot HTML, und auch die Grundstruktur erstellen Lassen Sie uns also die Butt-Tech-Animation erstellen. Zuerst werde ich das SVG-Tag verwenden. Um also SVG und in dieses Vg-Tag einzugeben, müssen wir die VivOC-Größe definieren Und dann müssen wir Breite und Höhe für dieses SVG-Bild definieren Breite und Höhe für dieses SVG-Bild Also werde ich zuerst Breite, Breite gleich 1920 und unsere Höhe gleich 1080 definieren Breite gleich 1920 . Das ist also unsere Viewport-Größe. Und in diesem SVG-Tag müssen wir zuerst das Butt-Tag erstellen Aber ich werde dieses Butt-Tag verwenden. Also werde ich das Butt-Tag kopieren. Und füge es hier ein. Da Sie diesen Pfad gestalten müssen. Dafür werde ich das Style-Tag verwenden. Wie Sie sehen können, lautet unser Pfadklassenname Punkt ST Zero vom Typ t0s Dann heißt es im Carver zuerst, wenn ich dir meinen SVG-Bildcode zeige, hier kannst du sehen, dass unsere Feldeigenschaft Also werde ich dieselbe CSS-Eigenschaft und denselben Wert aus diesem Code kopieren und ihn hier verwenden Wenn ich also diese Datei einstelle und diese Datei mit dem P-Server öffne, können Sie hier sehen, dass derselbe Strichpfad mit blauer Farbe erstellt wird . Und jetzt muss ich einen roten Punkt erstellen , der diesem Pfad folgen wird. Dafür müssen wir das Circle-Tag verwenden. Kehren wir zum bearbeiteten Visual Studio-Code zurück und versuchen zu verstehen, wie er funktioniert hat. Also werde ich zuerst ein Kreis-Tag nach dem PT-Tag, Kreis, erstellen ein Kreis-Tag nach dem PT-Tag, und für diesen Kreis die Inland-Stilmethode verwenden. Also, um das Style-Tag zu verwenden. Unsere erste Eigenschaft ist Füllung und unsere Füllfarbe ist Rot. Ich werde dafür den Hexa-Wert verwenden. Hauptstadt FF 00, 00. Wie Sie wissen, ist dies der Hexawert von Rot und unsere zweite Eigenschaft ist der Strich Ich werde hier Stroke eingeben. Für Stroke verwende ich die Farbe Weiß. Wie Sie wissen, müssen wir zum Erstellen eines Kreises den Radiuswert verwenden. Ich werde R gleich und innerhalb des Doppelkurses verwenden, unser Radiuswert ist 8,5. Wenn ich diese Datei einstelle und dir dann meinen Browser zeige, siehst du hier einen roten Punkt an der Laptop-Ecke. Jetzt müssen wir die Animation starten, die unseren roten Punkt von diesem Punkt zu diesem Punkt bewegen kann unseren roten Punkt von diesem Punkt zu diesem Punkt , indem wir diesem Pfad folgen. Für diese müssen wir eine SVG-Animationseigenschaft verwenden und der Name der Animationseigenschaft lautet animate motion In diesem Kreis-Tag werde ich Animate Motion Tag, Animate Motion verwenden Zuerst müssen wir den Pfad dieser Animation definieren. Dafür verwende ich die Pfadeigenschaft. Pfad entspricht innerhalb der Doppelcodes. Ich werde denselben Pfad verwenden, also werde ich diesen Pfad kopieren und dann werde ich ihn hier einfügen und unser nächstes Attribut ist das Duration-Attribut. Ich verwende DR gleich sechs Sekunden, unsere nächste Eigenschaft ist fill gleich, ich verwende den Freeze-Wert, ich verwende den Freeze-Wert, FRE Z E. Jetzt müssen wir nur noch das Animate-Motion-Tag schließen Das ist es. Lass mich das alles noch einmal erklären. Zuerst erstelle ich ein AVG-Tag, dessen Fußgröße 1920 5.080 beträgt Dann erstelle ich in diesem VG-Tag zuerst ein Butt-Tag, und das sind die Koordinaten dieses Put-Tags, und wir formatieren unser Put-Tag bereits mit dieser Klasse Dann erstelle ich mit einem Kreis-Tag einen roten Punkt und unser Radiuswert für den roten Punkt ist 815 Dann verwende ich ein SVG-Animations-Tag, bei dem es sich um animierte Bewegung handelt Es wird unseren roten Punkt animieren. Und jetzt müssen wir den roten Punkt entsprechend diesem Pfad bewegen entsprechend diesem Pfad Dafür verwende ich das Butt Tech-Attribut. Und innerhalb des Buttek-Attributs verwende ich denselben Wert. Wenn wir nicht denselben Wert, unseren roten Punkt, verwenden, folgen wir diesem Pfad nicht, und dann geben wir die Animationsdauer an, die wiederum sechs beträgt Und unser Animationsfeldmodus ist Freeze. Das heißt, wenn der Track fertig ist, friert unser roter Punkt ein. Also, wenn ich diese Datei einstelle und dir dann meinen Browser zeige und dann meinen Browser lösche, kannst du hier sehen, wie wir unsere Butt-Tech-Animation perfekt ausführen. Wenn das Tracking beendet ist, wird unser Ende dieses Pfads eingefroren. Ich hoffe, jetzt ist das Animationskonzept von Path Tech für Sie klar. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unsere nächste Übung. 27. Svg-Titelumschlag-Animation: Hallo Leute. Schön dich wieder zu sehen. Dies ist unsere vierte SVG-Animation im Zusammenhang mit Übungen. In dieser Übung lernen wir, wie wir einen Titel mit einem Strich umschließen können. Hier können Sie Text auf Ihrem Bildschirm sehen. Wenn ich auf diesen Text gehe, können Sie die Animation sehen. Wir haben es Title Rapping Animation genannt. Mal sehen, wie wir den SVG-Animationseffekt erzeugen können. Hier können Sie auf Ihrem Bildschirm nebeneinander sehen, dass ich meinen Visual Studio Creator und meinen Browser mit der Lightserver-Erweiterung öffne meinen Browser mit der Lightserver-Erweiterung und bereits ein HTML-Dokument erstelle Zuerst werde ich innerhalb des Body-Tags ein Deep-Tag erstellen Also, um zu tippen, TV, unsere tiefe Klasse ist SVG-Rapper-Rapper. In diesem tiefen Container werde ich ein SVG-Tag erstellen Ich werde Höhe Ot zu diesem SVG-Tag sagen, Höhe entspricht der Größe innerhalb der Doppelcodes, 60. Und die Breite entspricht der Breite innerhalb der Dole-Codes, 320. Außerdem müssen Sie den Min-Namensraum angeben. Lass es mich dir zeigen. Manchmal ist diese Erklärung notwendig und manchmal nicht. Dann werde ich innerhalb des SVG-Tags ein Rechteck erstellen Dafür verwende ich das Rec Tag, RCT. Außerdem werde ich diesem Rechteck eine Klasse zuweisen. Der Klassenname ist Shape, und jetzt werde ich Höhe und Breite für dieses Rechteck deklarieren . Höhe gleich 60 und Breite gleich 320. Dann drücke ich die Pfeiltaste , um diesen Tag zu beenden. Wenn ich diese Datei eingestellt habe, kannst du hier das Bild sehen. Wie Sie wissen, wurde es standardmäßig mit schwarzer Füllfarbe geliefert. Hier können Sie sehen, dass ein Rechteck mit einer Höhe von 60 und einer Breite von 320 erstellt wird. Dann werde ich innerhalb des SVG-Tags ein weiteres Dip-Tag, Dev, erstellen und diesem Dip-Text auch eine Klasse zuweisen . Ich werde einen Text in diesen Container eingeben, Ihren Text. Text. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Damit schließen wir unseren ATL-Teil erfolgreich ab. Und jetzt müssen wir mit dem Style-Bereich arbeiten. Also werde ich zuerst das Style-Tag innerhalb des Head-Tags erstellen . Geben Sie also Style ein. Im Style-Tag wähle ich zuerst ML und Body-Tag aus. Geben Sie also TML, Body ein. Dann möchte ich im Inneren zuerst eine Hintergrundfarbe festlegen Ich werde die Hintergrundeigenschaft verwenden. Für Value verwende ich den RGV-Wert RGB. In der Runde gebe ich dann 20 2020 ein Ich werde für unseren Hintergrund eine dunkelgraue Farbe festlegen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt werde ich diesem Hauptteil und diesem TML-Tag eine Höhe Hauptteil und diesem TML-Tag Also, um Höheneigenschaft, Höhe 100% einzugeben. Dann Text zentriert ausrichten und ich verwende Overflow Hidden Wenn ich diese Datei eingestellt habe, können Sie jetzt sehen, wie sie unser Inhaltscenter horizontal ausrichtet Jetzt starre ich diesen übergeordneten Container. Welche Klasse ist Swig Rapper. Also gebe ich VG-Rapper ein. Dann verwende ich in Cali Res zuerst Position Property, Position Relative Die besten 50% Ich möchte diesen Inhalt nur vertikal eingeben. Deshalb verwende ich diese Eigenschaft, und dann werde ich die Transform-Eigenschaft verwenden. Transformiere, übersetze Y -50% und unser Margenwert ist Auto. Auch unser Rapper mit diesen 320 Pixeln Wenn ich diese Datei einstelle, kannst du das Ergebnis sehen. Also richten wir unser Inhaltszentrum dieser Seite vertikal und horizontal aus. Und jetzt werde ich mit dieser rechteckigen Form arbeiten. Dafür verwende ich die Shape-Klasse Dot Shape. Dann werde ich in der Cariss zuerst in diese rechteckige Form umwandeln Dafür verwende ich Field Propriety. Fühl dich durchsichtig. Wenn ich diese Datei einstelle, kannst du dort das Ergebnis sehen. Und dann werde ich diesem Rechteck einen Strich zuweisen. Dafür verwende ich die Stricheigenschaft und unsere Strichfarbe ist Rot. Wenn ich diese Datei eingestellt habe, können Sie jetzt diesen Strich sehen, und ich werde auch die Strichbreite erhöhen, die acht Pixel beträgt. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Und jetzt müssen wir mit der Stroke-Array-Eigenschaft und der Stroke-Desk-Osite-Eigenschaft arbeiten Stroke-Array-Eigenschaft und der Stroke-Desk-Osite-Eigenschaft Lassen Sie mich Ihnen die Summe zum Typ Stroke Array zeigen, 140 Pixel bis 540 Pixel Mit diesen Werten können wir die Strichgröße unserer Striche steuern. Auch der Abstand zwischen Strich und Strich. Die nächste Eigenschaft ist Strich ds entgegengesetzt, und unser Posite-Wert für den Strich Desk ist minus 474 Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Außerdem verwende ich für diese Form die Eigenschaft border, sum to use border. Rahmentyp „Rahmen“ mit fünf Pixeln ist durchgehend und die Rahmenfarbe ist schwarz. Wenn ich diese Datei einstelle, ist sie immer noch unter der Konturlinie vorhanden. Deshalb können Sie das Ergebnis nicht sehen. Und jetzt verwende ich die Übergangseigenschaft für die Animationsdauer. Ich tippe also auf Transition. Für die Strichstärke verwende ich 1 Sekunde. Für Stroke Dash Posite werde ich wieder eins verwenden , und für Stroke Array werde ich wieder on duration verwenden Wenn ich diese Datei einstelle, können Sie hier sehen, dass es keine Änderungen gibt. Ich möchte diesen Übergang anwenden, wenn ich Cursor in den Text gehe. Jetzt werde ich diesen Text stylen. Dafür verwende ich in diesem Style-Tag die Textklasse Dot Text. Dann ändere ich in der Cariss zuerst die Schriftgröße und unsere Schriftgröße beträgt 22 Pixel, von dort komme und dann werde ich die Linehight-Eigenschaft ändern Ich gebe die Zeilenhöhe ein und unser Zeilenhöhenwert und unser Zeilenhöhenwert Und ich brauche auch etwas Abstand zwischen diesen Buchstaben. Ich verwende die Eigenschaft Buchstabenabstand, Buchstabenabstand, und der Wert ist acht Pixel. Außerdem werde ich die Schriftfarbe ändern, also gebe ich Farbe ein und unsere Farbe ist Weiß. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt verschiebe ich diesen Text über die Zeile. Dafür verwende ich den höchsten Wert, die obersten -48 Pixel, und unsere Position ist relativ Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Jetzt verwende ich den Hover-Selektor, um diesen Effekt anzuwenden. Also werde ich die Rapper-Klasse Dot SVG verwenden. Schweben Sie über den Doppelpunkt. Wenn ich also über diesen VG-Rapper-Container gehe, möchte ich die Stroke-Dash-Array-Eigenschaft und die Stroke-Dash-Osite-Eigenschaft ändern Stroke-Dash-Array-Eigenschaft und die Stroke-Dash-Osite-Eigenschaft Dafür müssen wir die Form, die Form auswählen. Dann ändere ich im Inneren zuerst den Strich mit dem Wert, also Typ, Strich, mit. Ich werde für unseren Strich einen Wert von zwei Pixeln verwenden. Und unsere nächste Eigenschaft ist Strichstrich gegenüber unserem Strichschreibtisch, der Gegenwert ist Null, unsere letzte Eigenschaft ist Strich A. Und unser Strichfehlerwert ist 760 Wenn ich diese Datei setze und dann meinen Cursor in den Text bewege, siehst du hier den Effekt Wir haben also erfolgreich den Titelumschlagseffekt erzeugt. Um eine perfekte Strich-Array-Größe zu erstellen, müssen Sie mit der Stroke-Strich-Fehlereigenschaft und der Strich-Offset-Genauigkeit arbeiten und der Strich-Offset-Genauigkeit Sie müssen sich nur daran erinnern, dass diese Werte sehr wichtig sind Wenn Sie die Größe des Rechtecks ändern und dann auch die Eigenschaftswerte ändern müssen. In unserer nächsten Übung werde ich mehr über diese Immobilie erfahren. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unsere nächste Übung. 28. Wellenförmige Textanimation in 90p verbessert: Schön euch zu sehen . Ich bin wieder mit einem neuen aufregenden Projekt zurück. In diesem Projekt werden wir eine reizbare Wav-Textanimation mit 360-Grad-Drehung erstellen reizbare Wav-Textanimation mit 360-Grad-Drehung Wie Sie sehen können, erhalten Sie einen Textwasser-WV-Effekt. Nicht nur das, unser Inhalt ist auch reizbar. Wir können den Text direkt im Browser ändern. Wir können unseren Inhalt im Browser auswählen und ihn auch entfernen. Und wir können hier jeden Textinhalt einfügen. Unserer Meinung nach werde ich Hello World eingeben. Für dieses Projekt müssen wir SVC-Filter verwenden. Lassen Sie uns also, ohne Ihre Zeit zu verschwenden, mit dem Praktischen beginnen. Endlich befinden wir uns im Code-Editor von Result Studio, und wie Sie sehen können, erstellen wir bereits eine Indexpunkt-T-Datei, und wir erstellen auch eine Style-Dot-Sass-Datei und wir verknüpfen unsere Style-Datei bereits mit dieser T-Datei Zuerst werde ich innerhalb des Body-Tags H two Tag, H two, erstellen Und in diese beiden Tags werde ich etwas Text eingeben. Im Moment werde ich Ihren Text eingeben. Wie Sie sehen können, haben wir diese Datei bereits mit dem if-Server in unserem Browser geöffnet . Lass mich den Browser öffnen. Hier können Sie in meinem Browser Ihren Text sehen. Kehren wir zum Visual Studio-Code-Editor zurück. Aber ich möchte geeignete Inhalte. Dafür müssen wir ein Attribut verwenden, und unser Attributname ist inhaltsfähig. Hier gebe ich contentitable ein, und wir müssen es wahr machen. Wenn ich diese Datei einstelle und zurück zum Browser gehe und auf diesen Text klicke, können Sie hier sehen, dass wir unseren Text direkt bearbeiten. Sie können hier einen beliebigen Text eingeben. Angenommen, ich möchte einen Namen eingeben. Jetzt können wir unseren Text über den Browser bearbeiten. Wenn ich diese Datei neu lade, ist, wie du siehst, wieder der alte Inhalt deines Textes Kehren wir noch einmal zum Visual Studio-Start zurück. Jetzt müssen wir in die Style-Datei springen. Zuerst werde ich unseren Bodytag stylen. Körper. Ist das Kaliber oder die erste Eigenschaft Marge? Marge, Null. Unsere nächste Eigenschaft ist Padding, Padding ebenfalls Null. Unsere dritte Eigenschaft ist Display, und ich möchte Flex vi Display Flex, Justify Content Center verwenden Flex, Justify Content Außerdem möchte ich die Elemente ausrichten. Aus diesem Grund verwende ich Aligned Item Property und Alignment Items Center. Damit müssen wir die Mindesthöhe festlegen. Männergröße hundert VH. Ich werde es auch als Hintergrundfarbe bezeichnen. Hintergrund für die Hintergrundfarbe, ich werde RGV RGB verwenden Für Rot werde ich 49 bestehen. Auch für Grün werde ich 49 bestehen, und für Blau werde ich auch 49 überschreiten. Wenn ich diese Datei einstelle, hat sie, wie Sie sehen können , eine dunkelgraue Hintergrundfarbe. Wenn ich Ihnen meinen Browser zeige, können Sie hier in meinem Browser sehen, dass wir dunkelgraue Hintergrundfarbe gesagt haben, und wir richten unseren Inhalt auch in der Mitte dieser Seite aus. Kehren wir noch einmal zum Koordinator zurück. Jetzt müssen wir unseren H-Two-Tag, H two, stylen. Innerhalb der Cali-Resis ist unsere erste Eigenschaft Farbe, und ich werde weiße Farbe verwenden. Weiß. Unsere zweite Eigenschaft ist Marge. Marge Null. Unsere nächste Eigenschaft ist Polsterung. Das Padding ist ebenfalls Null, und ich werde die Schriftfamilie verwenden. Schrift, Familie, sensorisch. Ich werde hier sensorische Schrift verwenden und ich werde auch Schrift 08 verwenden. Schrift, warte. Ich würde gerne die fettere Schrift nehmen. Ich werde 900 auswählen. Und dann wähle ich Schriftgröße Schriftgröße am. Wenn ich diese Datei einstelle und zurück zum Browser gehe, siehst du hier das Ergebnis, deinen Text. Und wenn du es bearbeiten willst, kannst du das auch. Sie können hier einen beliebigen Text eingeben. Angenommen, ich werde Hello World bestehen. Wir können den Inhalt direkt bearbeiten, aber wenn wir diesen Browser neu laden, wie Sie sehen, ist er wieder beim alten Inhalt, und jetzt müssen wir zum wichtigsten Teil dieses Videos springen , dem VG-Filter Kehren wir zum Visual Studio-Code zurück und zurück zur Index-Tabellendatei Und hier werde ich einen VG-Filter erstellen. Zuerst nehme ich das VG-Tag, VG. In diesem VG-Tag nehme ich das gefilterte Tag. Außerdem werde ich eine ID für diesen Filter festlegen. ID entspricht Verzicht. Dann verwende ich in diesem Filter-Tag zuerst den FE-Turbulenzfilter, FE-Turbulenz Und dann müssen wir ein Attribut verwenden. Unser erster Attributname ist type. Geben Sie innerhalb des Doppelcodes unseren Typnamen Turbulence ein Unser nächster Attributname ist Basisfrequenz. Grundfrequenz vom Typ Shamo. Die Grundfrequenz entspricht 0,005. Unser nächstes Attribut ist Num Octave. Num Oktave, entspricht fünf. Ich sage es Num Oktave fünf. Ich werde diese Datei einrichten. Als Nächstes müssen wir einen weiteren Filter erstellen, nämlich die F-Verschiebungs-Map. Also hier werde ich FI Displacement Map eingeben. Fakt. A, wir müssen hier zwei Attribute übergeben, die den Quellgrafiken entsprechen. Unser nächstes Attribut ist Skalierung. Skala entspricht 50. Deshalb haben wir erfolgreich unseren AVG-Filter erstellt. Jetzt müssen wir diesen Filter in unserem Body-Tag anwenden. Also gehe ich zurück zur CSS-Datei und verwende in diesem Body-Tag einen Eigenschaftsnamenfilter. Filtere die URL, und hier werde ich diese ID-Welle verwenden. Ich kopiere diese ID, und hier werde ich unseren ID-Namen mit einem Hass-Tag versehen Wenn ich diese Datei einstelle, zeige ich Ihnen meinen Browser, hier können Sie in meinem Browser das Verschiebungsergebnis sehen Hier können Sie sehen, wie dieser Effekt unseren Text einschränkt. Kehren wir zur CSS-Datei zurück , da wir sie in der Mitte dieser Seite ausrichten müssen. Hier werde ich ein anderes Tag, SVG SVG, innerhalb der Cali-Resis stylen SVG SVG, innerhalb der Cali-Resis das W W auf Null setzen Höhe, ebenfalls Null. Wenn ich diese Datei einstelle und Ihnen meinen Browser zeige, können Sie jetzt sehen, dass Align in der Mitte dieser Seite angezeigt wird, und jetzt kommen wir zu unserem letzten Teil , der Animation. Wir müssen unseren Inhalt um 360 Grad drehen. Kehren wir zum Code-Iter zurück. Im H-Two-Tag nehme ich nun die Animationseigenschaft. Animation und unser Animationsname ist animate. Ich möchte unsere Animation für 22. laufen lassen. Das ist unsere Animationsdauer. Und unsere Animationsrichtung ist linear. Und endlich möchte ich unsere Animation unendlich lang laufen lassen. Also hier werde ich Infinite Vado Infinite verwenden. Und jetzt müssen wir den Keyframe für diese Animation erstellen Keyframe für diese Also hier werde ich das Keyframe-Schlüsselwort mit der Rate Keyframes verwenden der Rate Und unser Animationsname ist animate. dann das Kaliber in der Position 0% ist und unsere Startposition gewinnt, möchte ich die Transformationseigenschaft verwenden Transformieren und hier verwende ich die Option Drehen um 360 Grad Dann bedeutet in unserer Endposition 100% -Position. Ich werde wieder die Transform-Eigenschaft verwenden. Transformieren, drehen. Und jetzt möchte ich es um Null Grad drehen. Wenn ich diese Datei einstelle und zurück zu meinem Browser gehe, lass es mich dir zeigen. Hier können Sie unseren endgültigen Effekt mit der Animation sehen. Nicht nur das, auch unser Inhalt ist irritierend. Wir können direkt bearbeiten. Also hier werde ich Hello World passieren. Hallo Welt. Das ist es also für dieses Tutorial. Ich hoffe dir gefällt dein Projekt. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unser nächstes Projekt. 29. SVG-Textmaskierung mit Video: Hallo Leute. Ich kam wieder mit einer neuen aufregenden Übung zurück. In dieser Übung werde ich SVG-Testmaskierung mit Video durchführen In dieser Übung lernen wir, wie wir SVG-Text verwenden und daraus eine Schnittmaske machen können SVG-Text verwenden und daraus eine Schnittmaske machen Sie können alles hinter dem Text zeigen. Es kann ein Video sein, vielleicht ein Bild oder etwas anderes, aber ich würde gerne Video verwenden. Lassen Sie uns mit dem Praktischen beginnen und sehen, wie wir diese Maske erstellen können. Endlich bin ich wieder bei meinem Visual Studio-Koordinator. Wie Sie sehen, erstelle ich bereits ein TML-Dokument und erstelle auch eine Style-Dot-CSS-Datei Hier können Sie in meinem aktuellen Arbeitsverzeichnis sehen, ein Video gibt, video.p4, und ich werde diese Videodatei für diese Übung verwenden, und ich öffne diese Datei bereits mit Zuerst werde ich innerhalb des Body-Tags ein VG-Tag und ein VG-Tag erstellen, und wir müssen diesem SVG-Bild Heighten Wed zuordnen Ich werde die Höheneigenschaft verwenden, wobei die Höhe 100% entspricht Und zwar gleich 100%. Ich werde die gesamte Seite unseres Browsers verwenden und innerhalb des SVG-Tags werde ich Textag verwenden, um den Text zu erstellen Also, um Text einzugeben, und unser Text ist SVG-Maske Wenn ich diese Datei einstelle und Ihnen meinen Browser zeige, hier können Sie in meinem Browser sehen, dass nichts passiert, weil wir diesen Text keine Feldfarbe festlegen können. Ich werde diesem Text Feldfarbe und Position zuweisen . Dazu müssen wir die X-Koordinate X gleich 50% und die Y-Koordinaten gleich 50% übergeben . Diese Koordinate wird unseren Text in die Mitte der Seite bringen , und außerdem müssen wir dem Text eine Feldfarbe geben, also verwende ich die Feldeigenschaft, die der Rate entspricht. Wenn ich diese Datei einstelle und Ihnen meinen Browser zeige, können Sie hier sehen, dass der Text eine Vig-Maske ist, aber er ist nicht vertikal zentriert. Wir müssen es vertikal zentrieren. Gehen wir noch einmal zum Visual Studio Crator. Dann springe in die CSS-Datei und ich wähle das Body-Tag Stattdessen das Cali vs, ich werde die Höhe einstellen. 100 VH und auf Null zusammenführen. Wenn ich diese Datei einstelle und Ihnen dann meinen Browser zeige, können Sie hier sehen, wie er vertikal und horizontal in der Mitte unseres Textzentrums ausgerichtet Lassen Sie uns diesen Text stylen und verbessern. Ich werde das SVG-Tag stylen. Schreiben Sie SVG in die Cali-Resis ein. Zuerst werde ich mit der Schriftgröße spielen. Schriftgröße 15 EM und unsere Position ist überholt, und der höchste Wert ist Null Außerdem ist der Hubwert Null und die Höhe 100%. Wenn ich diese Datei einstelle und dir meinen Browser zeige, kannst du hier sehen, dass der Text WigiMSK ist. Lassen Sie uns die Schriftfamilie dieses Textes ändern. Ich werde MonstertFont für diesen Text verwenden und kopiere den Link bereits von der Google-Front . Bald werde ich es hier einfügen Es liegt ganz bei Ihnen, welche Art von Schrift Sie verwenden möchten. Dann zurück zur Style Sass-Datei, und ich werde Font Family Property, Schriftfamilie MonsoroWise, Sansaif verwenden Schriftfamilie MonsoroWise Wenn ich diese Datei und für Sie meinen Browser eingestellt habe, können Sie hier sehen, können Sie hier sehen Aber wenn ihr hier merkt könnt ihr sehen, unsere Schrift nicht immer noch eine Medaille auf unserer Seite ist. Dafür müssen wir die Textankereigenschaft verwenden . Lass es mich dir zeigen. Also werde ich in meinem Text-Tag die Eigenschaft Text Anchor verwenden Medaille entspricht. Wenn ich diese Datei einstelle, zeige ich Ihnen meinen Browser. Jetzt können Sie sehen, dass unser Text Weld Align ist. Aber es gibt noch ein anderes Problem. Unser Text reagiert nicht. Dafür müssen wir MediaQuery verwenden. Lass es mich dir zeigen Zurück zur Style-CSS-Datei, und ich verwende Medienabfrage oder Medien, Bildschirm, und ich werde Maxi Probability, Max, With verwenden . Ich möchte es für die Größe aufteilen, also verwende ich 1.200 Pixel Wird eine neue CSS-Eigenschaft anwenden, wenn Auflösung unseres Browsers unter 1.200 Pixeln liegt Wenn der Browser weniger als 1.200 Pixel hat, möchte ich die Schriftgröße verringern Ich wähle das SVG-Tag und in der Leber steht, dass ich die Schriftgrößeneigenschaft verwenden werde Schriftgröße vier EM. Wenn ich diese Datei einstelle und dir meinen Browser zeige, siehst du hier unseren Browser mit mehr als 1.200 Pixeln Deshalb steht da 15:00 Uhr Schriftgröße. Aber wenn ich die Browsergröße reduziere, können Sie hier sehen, wie unsere Schrift auf die Größe um 4:00 Uhr geschrumpft ist. können Sie hier sehen, wie unsere Schrift auf die Größe um 4:00 Uhr geschrumpft ist. Wenn ich den Browser vergrößere, können Sie das Ergebnis sehen Lassen Sie uns einen Übergang einrichten , um die Transformation schön zu gestalten. Ich werde hier die Transition-Eigenschaft verwenden. Die Übergangsdauer beträgt 1 Sekunde, und dann müssen wir die Übergangseigenschaft übergeben. Warum müssen wir den Übergangseffekt anwenden? Ich möchte ihn in unserer Schriftgröße anwenden. Um die Schriftgröße zu kopieren, füge ich sie hier ein. Wenn ich diese Datei einstelle und dann zu meinem Browser zurückkehre und wenn ich die Browsergröße reduziere, können Sie den Übergang sehen. Wie Sie sehen können, ändert unsere Schrift ihre Größe reibungslos. Damit ist unser Hub-Job erledigt. Lassen Sie uns ein Video zu unserer Tabellenseite hinzufügen. Ich werde hier das Video-Tag verwenden. Und in diesem Video-Tag werde ich einige Attribute verwenden, so etwas wie Autoplay, so etwas wie Autoplay, oder das nächste Attribut ist Place in Line, Mutate, Loop und In diesem Video-Tag werde ich das Quell-Tag verwenden, um dieses Video zu verlinken Geben Sie also Quelle, SRC ein und unser Videodateiname lautet video.v4 Wenn ich diese Datei einstelle und dir meinen Browser zeige, kannst du hier das Ergebnis auf deinem Bildschirm sehen Jetzt muss ich zwei weitere SVG-Tags verwenden, Diptag und Musk-Tag Lass es mich dir zeigen. Ich werde hier Diptag eingeben Im Diptag werde ich den Musk-Tag erstellen , Musk. Da ich dieser Maske eine ID zuweisen werde, die ID entspricht, und unser ID-Name Und ich muss diese Maske auch positionieren, also werde ich X gleich Null verwenden, und auch die Position von Y ist Außerdem werde ich Höhe und Breite für diese Maske angeben, Höhe gleich 100%, und muss auch Breite und Breite angeben , die 100% entsprechen Dann verschiebe ich dieses Text-Tag innerhalb des Masken-Tags. Wenn ich diese Datei einstelle und Ihnen meinen Browser zeige, können Sie hier sehen, dass unser Text weg ist und Sie bereits mit dem Definition-Tag vertraut Wir werden in unserem vorherigen Tutorial etwas über das Dep-Tag erfahren, ich werde es nicht noch einmal erklären Innerhalb des Massen-Tags müssen wir also ein Rechteck erstellen Also werde ich das Rec Tag verwenden. Ich werde dieselbe Eigenschaft mit hohem Gewicht für dieses Rechteck verwenden . Also werde ich die Koordinaten kopieren und sie hier einfügen, und ich muss auch dieselbe rechteckige Form außerhalb dieses Dep-Tags verwenden , ungefähr so Wenn ich Ihnen meinen Browser zeige, können Sie jetzt nichts mehr sehen Jetzt müssen wir unsere rechteckige Form in unserem CSS auswählen. Ich werde SVG Rec eingeben. Dann fülle ich im Inneren des Carli Resist das Rechteck mit weißer Farbe Ich verwende die Feldeigenschaft Weiß. Dann verwende ich Maskeneigenschaft, Maske, Doppelpunkt, URL. In der Klammer müssen wir hier diese ID, Maske, angeben Also werde ich die ID kopieren und Hashtag oder ID-Maske eingeben Wenn ich diese Datei einstelle, sollte sie funktionieren. Lass uns zum Browser gehen und sehen, was passiert ist. Hier kannst du sehen, dass unser SVG-Video perfekt funktionieren muss, und wenn ich die Browsergröße reduziere, es auch perfekt funktioniert. Jetzt ist für Sie klar, wie wir SVG-Geschmacksmaskierung durchführen können Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unsere nächste Übung. 30. Scroll-Zeichnen: Hallo, Leute. Schön , dich wieder zu sehen. Ich komme wieder mit einer neuen spannenden Übung. In dieser Übung lernen wir das Zeichnen von Schriftrollen mithilfe des VG Path-Tags. Lassen Sie uns also in den Webbrowser springen. Wie Sie sehen können, gibt es auf dieser Seite nichts. Es ist völlig leer. Aber wenn ich mit der Maus scrolle, kannst du sehen, dass sie ein Bild gezeichnet hat, ich zeichne eine Sternform. Dieser VG-Trick bezieht sich auf die Scrollbar. Wenn ich also in meinem Browser scrolle, vervollständigt er die Form Schauen wir uns also an, wie wir es erstellen können. Seite an Seite öffne ich meinen Visual Studio Creator und meinen Browser mit der Lifesaver-Erweiterung und erstelle bereits ein HTML-Dokument mit dem Namen Index Dot HTML Zuerst werde ich innerhalb des Body-Tags das Vg-Tag erstellen SVG. Außerdem werde ich diesem SVG-Tag eine ID zuweisen, meiner SVG entspricht. Dann werde ich im Kopfbereich Stil verwenden. In diesem Style-Tag wähle ich zuerst den Körper und unsere erste Eigenschaft ist Höhe, die 3.000 Pixeln entspricht. Sie sind vielleicht schockiert, warum ich diesen Wert für Körpergröße verwende , weil wir auf dieser Webseite nicht viele Inhalte haben . Aus diesem Grund werde ich zum Scrollen diese Höhe verwenden Wenn ich diese Datei einstelle, siehst du hier die Bildlaufleiste. Dann starte ich das SVG-Bild. Hashtag, mein SVG, und dass das Kaliber unsere erste Eigenschaft ist, ist Position festgelegt. Ich werde für dieses Beispiel die feste Position verwenden. Dann die oberen 15%, für das SBG-Bild werde ich 400 Pixel Breite, 400 Pixel Breite und 210 Pixel Höhe verwenden 400 Pixel Breite und 210 Pixel Höhe Außerdem verwende ich den Rand auf der Schoßseite, also gebe ich Rand p -50 Weil ich das SVG-Bild an dieser Position positionieren möchte , nicht oben links in der Ecke Deshalb verwende ich diese Eigenschaften. Als Nächstes werde ich die Sternform mithilfe eines Butt-Tags erstellen. Der Pfad, der den Pfad schließt, ist also der Butt-Tag. Unsere erste Eigenschaft ist das Gefühl. Fühl dich keinem ebenbürtig. Ich brauche keine Feldfarbe für die Sternform. Dann ist unsere nächste Eigenschaft Stroke. Schlag entspricht der Geschwindigkeit. Außerdem möchte ich diese Strichstärke festlegen. Also werde ich die Strichbreiteneigenschaft Width verwenden , die gleich drei ist. Außerdem werde ich die ID auf diesen Pfad setzen. ID entspricht Stern. Lassen Sie uns also die Form mithilfe der PT-Koordinaten erstellen. Wie Sie wissen, müssen Sie, um eine Form mit dem Put-Tag zu erstellen, zuerst das D-Attribut, Dequal two, anstelle der doppelten Codes, unserem Ausgangspunkt, verwenden Dequal two, anstelle der doppelten Codes, unserem Ausgangspunkt, Wir müssen den Startpunkt angeben, 150 Pixel, und müssen auch den Punkt angeben Und unser Punkt ist 200 Pixel, und unser nächster Punkt ist L 225 Pixel. Und auch der Endpunkt ist Null Pixel. Wenn ich diese Datei einstelle, zeichnet sie, wie Sie sehen können, eine Linie. Hallo, es gibt einen Fehler bei der Schreibweise der Breite. Ich habe vergessen, D zwischen I und T anzugeben . Wenn ich diese Datei eingestellt habe, können Sie jetzt die Breite des Strichs sehen. Das ist unser Ausgangspunkt. 150 Pixel YxS und 200 Pixel Xxs. Das ist unser nächster Punkt. Um ein Raumschiff zu bauen, werde ich einen weiteren Punkt an diesem Ort erstellen. Für XXs werde ich 300 überschreiten und für YxS werde ich 200 überschreiten Wenn ich diese Datei einstelle, können Sie sehen, dass sie an dieser Position einen weiteren Punkt erzeugt Und jetzt werde ich an dieser Position einen weiteren Punkt erstellen . Dafür werde ich 150 XX und 50 YX bestehen . Wenn ich diese Datei einstelle, wird, wie Sie sehen, die Linie erzeugt, und dann möchte ich einen weiteren Punkt an dieser Position In X-Richtung verwende ich also L 300 und in YX-Richtung werde ich nur 50 verwenden. Wenn ich diese Datei einstelle, können Sie jetzt sehen, worum es geht. Und jetzt müssen wir diese Form fertigstellen. Also müssen wir eine Linie von diesem Punkt bis zu diesem Punkt ziehen. Und wie Sie wissen, müssen wir den Z-Wert übergeben, um zum Startpunkt zurückzukehren . möchte nur Z übergeben. Wenn ich diese Datei einstelle, können Sie jetzt sehen, wie sie unsere Sternform vervollständigt. Also haben wir den Zeichnungsblock erfolgreich fertiggestellt. Aber wenn ich auf dieser Seite scrolle, wird das Bild nicht gezeichnet. Dafür müssen wir JavaScript verwenden. Zuerst werde ich das Skript-Tag erstellen. Nach dem BG-Tag gebe ich Script ein. Dann werde ich innerhalb des Skript-Tags zuerst die ID dieses Pfadelements abrufen, also Stern , also Stern, der dem Punkt des also Stern , also Stern, Dokuments entspricht, Element für ID ermitteln. In der Klammer ist unser ID-Name ein Stern und am Ende der Zeile ein Doppelpunkt Als Nächstes müssen wir die Gesamtlänge dieser Form ermitteln. Dafür werde ich eine weitere Variable erstellen, er nth. Wie bei Star Dot verwende ich die Funktion Get Total Length Jetzt haben wir die Gesamtlänge dieser Sternform. Als Nächstes müssen wir mit dem Strich-DH-Array-Wert und dem entgegengesetzten Strich-Wert spielen Strich-DH-Array-Wert und dem entgegengesetzten Strich-Wert spielen Stern, Punkt, Punkt, Anordnung Stern, Punkt, Punkt, Strich entspricht der Länge Dann Semikolon, um diese Zeile zu beenden. Strich-Array bedeutet, dass dies die Startposition dieser Zeichnung ist die Startposition dieser Zeichnung Mit der Osete-Eigenschaft von Stroke Desk können wir diese Sternform ausblenden, und als Nächstes verwende ich den Strichstrich osetePperty Ich werde Stroke Dash Array durch Stroke Desk gegenüber ersetzen . Auf diese Weise können wir diesen Stern mit störendem Strich verstecken und diese Linie entfernen , um den Stern vor diesem kalten Rohzustand zu zeigen Jetzt müssen wir den Prozentsatz dieser Schriftrolle herausfinden. Für diese müssen wir die Window Add even Listener-Funktion verwenden Window Add even Listener-Funktion Lassen Sie mich Ihnen zeigen, dass Sie Window Dot, A, Even Listener eingeben. Dann in der Klammer ist unser Eventname scroll Wenn ich die Webseite scrolle, möchte ich eine Funktion aufrufen und unser Funktionsname ist meine Funktion Jetzt müssen wir eine Funktion erstellen, die diesen Scrollwert berechnen kann Also werde ich diese Funktion erstellen. Zuerst verwende ich das Funktionsschlüsselwort, Funktion und unser Funktionsname ist meine Funktion. In der Klammer möchte ich keinen Parameter übergeben , also lasse ich ihn schwarz Dann werde ich in Calibra zuerst eine Variable erstellen, werde ich in Calibra zuerst eine Variable erstellen, und unser Variablenname ist Scroll Percent Entspricht dem Text innerhalb der Klammer. Zuerst müssen wir den Text-Scroll-Wert mit dem Scroll-Wert für das Dokument verbinden . Lass es mich dir zeigen. Punkt, Hauptteil, Punkt, Scroll zu Plus, damit füge ich hinzu, dass ich das Dokumentelement Scroll of Value, Dokumentpunkt, Dokumentelement, Punkt, Scroll to hinzufügen werde Dokumentelement Scroll of Value, Dokumentpunkt, Dokumentelement, Punkt, Scroll to hinzufügen Dokumentelement, Punkt, , und wir müssen es mit dem Höhenwert teilen. Innerhalb der Klammer müssen wir das Element mit dem Dokumentpunkt abrufen, Scrollhöhe des Punkts und ab der Bildlaufhöhe müssen wir die Höhe des Clients abziehen Ich tippe minus Höhe des Dokument-Elements. Diese Berechnung wird die kalten Prozentsätze zurückgeben. Wie Sie sehen können, wird beim Einstellen meiner Datei meine bereits ausgeblendet . Jetzt muss ich die Form zeichnen, wenn ich nach unten scrolle Ich werde eine weitere Variable erstellen, und unser Variablenname lautet draw, entspricht der Länge, multipliziere mit Scroll-Prozent und semig, um diese Zeile zu beenden Wenn Sie die Zeichnung umkehren möchten, wenn Sie für diesen Stern nach oben scrollen, werden der Stil, der Punkt und die Striche entgegengesetzt, was Länge minus Braw entspricht Wenn ich diese Datei einrichte und meine Seite scrolle, wie Sie sehen können, zeichnet sie unsere Form perfekt Wenn ich sie nach oben scrolle, wie Sie sehen können, wird die Zeichnung umgekehrt. Wenn ich nach unten scrolle, wird unser Bild gezeichnet, und wenn ich nach oben scrolle, wird die Zeichnung umgekehrt Ich hoffe, dir gefällt dieses Projekt. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Projekt. 31. SVG-Loader-Animation: Schön euch zu sehen. In diesem Abschnitt werden wir alle Loader nacheinander erstellen. Hier sehen Sie insgesamt acht verschiedene Arten von SVG-Loadern und ich werde alle Loader nacheinander erstellen. Ich werde unsere Projekte mit diesem Loader starten. Mal sehen, wie wir diesen Loader erstellen können. Endlich bin ich wieder bei meiner Adoillustrator-Software und erstelle einen Viewboard-Bereich von 200 mal 200 Wie Sie sehen können, müssen wir in diesem Viewboard-Bereich zwei Formen annehmen, nämlich eine komplette graue Ringkreisform eine Wie Sie sehen können, ist damit ein kleines Stück Kreis entstanden Und jetzt muss ich dieses rote Stück Kreis entsprechend der Kreisfläche drehen Kreis entsprechend der Kreisfläche drehen Jetzt geht es darum, wie wir diese Form erstellen können. Wie Sie sehen können, erstelle ich hier bereits einen ähnlich großen Viewportbereich. Ich werde hier einen Kreis ohne Feldfarbe erstellen Dann werde ich diese Kreisform in der Mitte ausrichten, etwas an dieser Position Dann erhöhe ich den Strichwert auf Pixel. Es liegt an Ihnen, welche Art von Schlaggewicht Sie möchten. Dann müssen wir diesen Strich in einen Konturpfad umwandeln. Dazu müssen Sie den Strich auswählen und dann zum Objektabschnitt gehen. Hier sehen Sie den Optionspfad Klicken Sie einfach auf Konturstrich. Jetzt wird unser Strich in eine Form umgewandelt, und jetzt ändere ich die Farbe des Strichs, etwa die graue Farbe. Dann werde ich diese Kreisform an dieser Position duplizieren . Dafür lobe ich Steuerung C, Kontrollblatt V. Hier kannst du in meinem Ebenenbereich sehen, dass wir jetzt zwei Formen haben müssen, und jetzt werde ich unsere vorherige Form verstecken. Und jetzt werde ich diese Kreisform von diesem Punkt bis zu diesem Punkt ausschneiden . Dafür werde ich die Linienform verwenden. Ich werde eine Linie von diesem Punkt zu diesem Punkt ziehen und bis zu diesem Punkt Ich werde alle Formen und Linien zusammen auswählen und dann das Schiff loben, um Shape Builder-Tool zu aktivieren Ich werde diese Schildkröte von diesem Punkt aus ausschneiden und auch die Strichlinien entfernen. Und dann werde ich die Form mit roter Farbe füllen. Und außerdem werde ich meinen vorherigen Kreis sichtbar machen. Also haben wir erfolgreich die Loader-Struktur erstellt. Und jetzt müssen wir dieses Bild als Vigimage festlegen. Dafür müssen Sie in den Dateibereich gehen und dann Speichern unter loben Und hier können Sie die Dateitypoption AVG sehen, Zeichenflächen verwenden und dann das Speichern loben Und es liegt an Ihnen, welche Art von CSS-Eigenschaft Sie verwenden möchten Sie können das Style-Attribut verwenden, andernfalls können Sie das Style-Element verwenden und Sie kennen den Prozess. Ich habe mein SVG-Bild bereits gespeichert. Deshalb werde ich es nicht noch einmal speichern. Kehren wir zum Visual Studio Codator zurück und versuchen zu verstehen, wie wir diesen Loader erstellen können Schließlich bin ich wieder bei meinem Visual Studio-Codator und öffne bereits ein HTML-Dokument mit dem Namen Index Dot Außerdem können Sie in meinem aktuellen Arbeitsverzeichnis ein AVG-Bild mit dem Namen Loader Dot SVG sehen meinem aktuellen Arbeitsverzeichnis ein AVG-Bild mit dem Namen Wenn ich Ihnen den SVG-Code zeige, können Sie ihn deutlich sehen. Wie Sie sehen können, ist unsere View-Wok-Größe 200 mal 200, und wie Sie sehen können, müssen wir in unserem SVG-Bild zwei Pfade Unser erster Pfad ist für einen vollständigen Kreis und unser zweiter Pfad für den Knotenpunkt dieses Kreises Jetzt kopiere ich den gesamten Code aus dieser Datei. Und dann werde ich in die STL-Datei mit dem Indexpunkt springen. Zuerst werde ich in meinem Hauptteil einen Div-Klassenlader erstellen In dieses Div werde ich den gesamten SVG-Code einfügen , ungefähr so. Wenn ich diese Datei einstelle und dir meinen Browser zeige, kannst du das SVG-Bild in unserem Browser sehen. Aber es sieht ziemlich riesig aus. Wir müssen es verkleinern, außerdem müssen wir es in der Mitte dieser Seite positionieren. Also bin ich wieder Visual Studio Coriator und werde hier Style-Tag eingeben Stil. Zuerst werde ich den Körper stylen. Statt Cali RessF werde ich Margin Property verwenden Marge Null. Dann verwende ich die Eigenschaft Padding, Padding ebenfalls Null Und dann werde ich eine Hintergrundfarbe festlegen. Ich werde den RGV-Wert verwenden. RGB in der Klammer, unser R-Wert Der G-Wert ist ebenfalls 66 und der B-Wert ist Wenn ich diese Datei einstelle und Ihnen meinen Browser zeige, können Sie hier sehen, dass er eine dunkelgraue Hintergrundfarbe erzeugt, dann werde ich diese Loader-Größe verkleinern. Dafür wähle ich die Loader-Klasse aus. Loader innerhalb der Cariss-Höhe, 300 Pixel, Gras, ebenfalls 300 Pixel Wenn ich diese Datei eingestellt habe und meinen Browser angezeigt habe, können Sie hier sehen, dass wir unser Bild erfolgreich verkleinert Und jetzt müssen wir dieses SVG-Bild in der Mitte dieser Seite ausrichten dieses SVG-Bild in der Mitte dieser Seite In der Textauswahl verwende ich zunächst Display-Eigenschaft, Display-Flex, Justify Content, Center, Text Align Center Wenn ich diese Datei einstelle und Ihnen meinen Browser zeige, können Sie hier sehen, wie Sie dieses Bild horizontal ausrichten Wann soll nun ein Rand zugewiesen , um es in der Mitte dieser Seite zu zentrieren? Ich werde Margin Top Value verwenden. Oberer Rand 300 Pixel. Wenn ich diese Datei einstelle und dir meinen Browser zeige, kannst du hier sehen, dass wir unseren Loader erfolgreich gemixt haben, und dann kommt der Hauptteil dieses Tutorials. Wir müssen diesen Loader animieren. Dazu müssen wir diese rote Form im Kreis Sargumpas drehen diese rote Form im Kreis Sargumpas Mal sehen, wie wir diese Form drehen können. Jetzt müssen wir diesen Pfad animieren. Zuerst müssen wir das schließende Pfad-Tag erstellen . Innerhalb dieses Butt-Tags müssen wir ein weiteres Tag verwenden, nämlich animate transform Also um zu tippen, zu animieren, zu transformieren. Da ich dieses Tag schließen werde, müssen wir auch einige grundlegende Attribute verwenden Unser erstes Attribut ist der Attributtyp. Entspricht XML und müssen auch den Attributnamen angeben, der der Transformation entspricht . Unser Animationstyp ist Typ, entspricht Rotation. Dann müssen wir den Startpunkt und den Endpunkt der Animation angeben . Dafür verwende ich dafür das From-Attribut . Ab gleich unserem Startdrehwinkel ist Null und dann müssen wir den Mittelpunkt dieser Drehung angeben. Wir müssen Xxs und YxS bestehen. Wie Sie wissen, funktioniert unsere VD-Ansicht in der Höhe und W entspricht 200 Pixeln. Um den Mittelpunkt zu finden, müssen wir die Höhe durch zwei teilen. Wenn ich es also 200 durch zwei teile, ergibt es 100. Das ist für X xs und ähnlich wird für Y xs 100 geschrieben. Das ist unser X xS-Punkt und das ist unser Y-Achsenpunkt. Dies ist der Startpunkt dieser Animation und muss auch den Endpunkt dieser Animation angeben. Ich verwende zwei Werte, also zwei, was innerhalb des doppelten Kurses entspricht. Und zuerst müssen wir den Drehwinkel angeben. Und ich möchte diese Drehung abschließen, also werde ich 360 Grad verwenden. Und außerdem müssen wir den Mittelpunkt angeben. Unsere überschüssige Richtung ist also 100 und auch die YxS-Richtung ist 100 Und dann müssen wir die Dauer der Animation angeben. Also werde ich den Wert der verwenden, der entspricht 0,8 Sekunden. Und außerdem werde ich diese Animation unendlich lange laufen lassen. Also werde ich das Repeat Count-Attribut verwenden. Zählung entspricht innerhalb der Doppelcodes, unbegrenzt. Wenn ich diese Datei einstelle und Ihnen dann meinen Browser zeige, können Sie hier auf Ihrem Bildschirm sehen unser Loader erfolgreich funktioniert Wenn Sie diese Rotation schneller machen möchten, müssen Sie die Dauer verringern. Lass es mich dir zeigen. Jetzt verwende ich eine Dauer von 0,4 Sekunden. Wenn ich diese Datei einstelle und Ihnen meinen Browser zeige, können Sie hier sehen, dass unsere Rotationsgeschwindigkeit erhöht wurde. Ich hoffe, dir ist jetzt klar wie wir diesen SVG-Loader erstellen können. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf unsere nächste Übung. 32. Bildturbulenzen und Verschiebung Teil 1: Hallo, Leute. Schön , dich wieder zu sehen. Ich bin wieder mit einer neuen aufregenden Übung zurück. In dieser Übung werde ich Ihnen beibringen, wie wir den Tarvulens-Welleneffekt erzeugen können Wenn ich meinen Browser neu lade, wurde, wie Sie sehen, nach 2 Sekunden eine Animation mit dem Tarvulence-Effekt ausgeführt Lassen Sie uns mit der Praxis beginnen und sehen, wie wir dieses Projekt erstellen können Für dieses Beispiel werde ich dieses Bild verwenden. Wie Sie sehen können, öffne ich Seite an Seite meinen Resource Studio Creator und meinen Browser mit der Lip-Servererweiterung und erstelle bereits ein HTML-Dokument mit dem Namen Index Dot TML Außerdem erstelle ich eine CSS-Datei mit 40-Punkt-CSS. Ich verlinke diese Datei bereits mit dieser STL-Datei. Als Nächstes verwende ich das SVG-Tag innerhalb des Body-Tags, also tu SVG, dann innerhalb des SVG-Tags Im Moment müssen wir kein Ansichtsfeld angeben, da wir dieses VG für einen Filter erstellen werden. Also hier werde ich das Filter-Tag verwenden. Filter. Wir haben insgesamt 17 verschiedene Filter in SVG. Für dieses Tutorial werden wir jedoch nur zwei Filter verwenden. Zuerst verwende ich Tarulns und dann verwende ich Displaced Pen Map Aber vorher werde ich diesem Filter eine ID zuweisen, die dem Rauschen entspricht Damit übergeben wir die Koordinaten, die Position und die Y-Position, Position und die Y-Position, X dem Wert 0% innerhalb des Zitats entspricht. In ähnlicher Weise entspricht Y innerhalb der Codes 0%. Damit übergeben wir die Filterbreite und die Filterhöhe, Breite 100% entspricht. Außerdem entspricht die Höhe 100%. Verwenden wir unseren ersten Filter , AE Tarvulens Summenzeit FE Tarbulens. Jetzt müssen wir einige Attribute verwenden. Nehmen wir an, unser erstes Attribut ist Basisfrequenz, Summon Tie Base, Beste Frequenz entspricht stattdessen den Puppencodes, übergebe ich den Wert für die Summe von zwei, 0,02, und unser zweiter Wert ist Das sind zwei verschiedene Werte. Es wird die Wellenform der Sternlinse beeinflussen. Sie können mit diesen Werten experimentieren. Es liegt an Ihnen und unser nächstes Attribut ist Ergebnis, Summenzeit, Ergebnis. Das Ergebnis entspricht dem Rauschen. Außerdem müssen wir ein weiteres Attribut übergeben , nämlich Num Oktave, Typ, Num Oktave, gleich eins Außerdem werde ich eine ID für diesen Filter verwenden, die ID entspricht Dann werde ich dieses Tag vervollständigen. Lassen Sie uns den Turbulenzfilter mit einem Bild verwenden und sehen, wie das funktioniert Software ist VG-Tag. Ich werde noch einen Dip machen. Tief und unser Dip Plus ist ein Behälter. In diesen tiefen Behälter werde ich ein Bild einfügen. Bild, IMG-Quelle und unser Bildname sind, wie Sie sehen können, OceanSunPMO OceanSunPMO Wenn ich diese Datei einstelle, können Sie das Bild in unserem Browser sehen. Das ist für einen SML-Teil. Lass uns in die CSS-Datei springen und dieses Bild stylen. Zuerst werde ich den Bodytag stylen. Körper, Rand links, Null, Rand rechts, Null. Und ich werde diesem Körper auch die Körpergröße anpassen. Die Höhe entspricht hundert VH. Ich werde auch die Position relativ setzen und dann das SVG-Tag stylen Auswahl von SVG ist also die CarirassPosition, die Position entspricht absolut Und als Nächstes werde ich unseren Container D stylen. Also kopiere ich den Besetzungsnamen und zurück in die Style-Datei Der Container im Kaliber besagt, dass ich die Eigenschaft Display Grid, Display Grid verwenden werde Unsere nächste Eigenschaft sind Grid-Template-Spalten. G-Vorlagenspalten. Hier werde ich Repeat One verwenden. Für unsere Rasterzellengröße werde ich Auto Val verwenden. Ich werde Auto Valu verwenden. Außerdem werde ich dieses Objekt in der Mitte ausrichten und das Objekt in der Mitte ausrichten Außerdem möchte ich die Höhe dieses Containers auf die Höhe 100, die Breite auf 80% und den Rand auf Null oder zwei einstellen Höhe 100, die Breite auf 80% und den Rand auf Null oder Wenn ich diese Datei einstelle, wird hier nichts passieren. Wenden wir also den Filter in unserem Image-Tag an. Sumo Typ IMG im Auto sagt, ich bin Typ W W, was 100% entspricht Für das Bild verwende ich 100% mit. Wenn ich diese Datei eingestellt habe und Sie jetzt sehen können, dass unser Bild responsiv ist, und jetzt werde ich diesen Sternfilter auf dieses Bild anwenden diesen Sternfilter auf dieses Bild Wie Sie sehen können, verwende ich dafür die ID Noise Also hier gebe ich Filter, URL, Hashtag Noise ein. Wenn ich diese Datei einstelle, kannst du das Ergebnis sehen. Wie Sie sehen können, wenn wir nur den Turbulenzfilter auf diesem Bild verwenden , entsteht ein gewisses Muster auf diesem diesem Zusammenhang müssen wir also einen anderen Filter verwenden , nämlich die Geben Sie also FE, Displacement Map , ein, damit müssen wir auch einige Attribute verwenden. Unser erster Attributname steht in, gleichbedeutend mit Inside the Double Course, Source Graphics, Subtype, Source Graphic, unser zweiter Attributname ist N two, N two, Rauschen innerhalb des doppelten Kurses entspricht, und unser dritter Attributname ist Skala Skala entspricht 20. Wenn ich diese Datei eingestellt habe, können Sie das Webmuster auf diesem Bild sehen. Quellgrafik ist unser Bild, und mithilfe von Rauschen können wir es mit einem Filter verknüpfen. Nach der Kombination dieser beiden Effekte ist dieses Ergebnis entstanden. Das ist es für dieses Tutorial. Im nächsten Teil dieses Tutorials werden wir Animationen mit JavaScript durchführen. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf den nächsten Teil dieses Tutorials. 33. Bildturbulenzen und Verschiebung Teil 2: Hallo Leute, schön, dass ihr wieder da seid. Dies ist der zweite Teil dieses Tutorials. In diesem Teil werden wir die Animation mit JavaScript ausführen . Im Grunde werde ich GSP-Animationen verwenden. Zuerst werde ich diese Datei mit CDN verknüpfen und dann werde ich das Script-Tag erstellen Zuerst müssen wir den Turbulenzeffekt auswählen. Dafür verwende ich diese ID, Turbulence. Ich möchte eine Variable erstellen, die dem Element Dokument entspricht, Punkt, Element nach ID abrufen, innerhalb der Klammern, innerhalb des einzelnen Kurses Turvulens innerhalb des einzelnen Kurses Turvulens Dann semikonal, um diese Zeile zu beenden. Danach werde ich eine Zeitleiste erstellen. Also TL Timeline entspricht Mu Timeline max. Setzen Sie die Klammer und fügen Sie die Cimsis ein. Um diese Zeile zu beenden, müssen wir Pause gleich dem wahren Semikolon setzen Pause gleich dem wahren Semikolon Das heißt, wenn ich meinen Browser lade, wird die Animation nicht ausgeführt Es wird die Animation ausführen, wenn ich anrufe, und jetzt müssen wir nur noch die Attribute mit JavaScript ändern . Ich werde die Funktion tal dot two eingeben. In der Klammer müssen wir zuerst das Element „Element bedeutet Turbulenzelement Also muss ich EL eingeben. Wir müssen die Dauer übergeben, die drei Sekunden beträgt, und dann müssen wir das Objekt übergeben, und ich möchte das Attribut ändern, Summe oder Typ ATR, Doppelpunkt. Ist das kontinuierlich, ich möchte hier die Grundfrequenz, den Summentyp und die Grundfrequenz ändern . Damit müssen wir auch den Grundfrequenzwert übergeben. Innerhalb eines einzigen Kurses, Null, Null. Schließlich müssen wir noch einen weiteren Wert übergeben, nämlich delay Nach zwei Sekunden Verzögerung beim Laden des Browsers wird die Animation ausgeführt. Schluss übergebe ich zwei und ein Semikolon an diese Zeile Wir müssen eine weitere Funktion aufrufen, nämlich die Wiedergabefunktion nämlich die Ton zum Eintippen, um nicht abzuspielen. Also fahren wir fort, diese Zeile zu beenden. Wenn ich diese Datei einstelle, führt sie, wie Sie sehen , nach zwei Sekunden unsere Animation aus. Ich werde meinen Browser noch einmal neu laden. Wie Sie sehen, wird nach zwei Sekunden meine Animation ausgeführt, und es dauert drei Sekunden, bis die Animation abgeschlossen da unser Wert für die Animationsdauer ist, da unser Wert für die Animationsdauer drei und unser DA-Wert für die Animation zwei Sekunden beträgt In unseren beiden Funktionen übergeben wir also im Grunde insgesamt vier Parameter. Zuerst unser ausgewähltes Element, dann die Animationsdauer, und dann müssen wir den Attributwert übergeben, und zuletzt müssen wir die Animationsverzögerungszeit übergeben. Das ist es für dieses Tutorial. Jetzt können Sie mit AVG Ihren eigenen Turbulenzeffekt erzeugen. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unser nächstes Tutorial 34. Svg-Karten-Wiedervereinigungsanimation: Hallo, Leute. Schön , dich wieder zu sehen. Ich bin wieder mit dem neuen SBG-Animationsprojekt zurück. Und in diesem Projekt werden wir einen wiedervereinigenden Animationseffekt Ihrer Länderkarte erzeugen wiedervereinigenden Animationseffekt Ihrer Lassen Sie mich den Browser zur Demonstration neu laden. Nachdem ich meinen Browser neu geladen habe, können Sie sehen, wie jeder Bundesstaat des Landes zu seiner eigenen Position zurückgekehrt Wie Sie sehen können, entsteht dadurch ein wunderbarer Wiedervereinigungseffekt. Ich habe dieses Projekt an Gandhis fünfzigstem Geburtstag gemacht. nicht nur das, wenn ich mit meinen Autos über diese Karte fahre, können wir diese Karte auch dreifarbig füllen Dieses Projekt wird viel Zeit in Anspruch nehmen. Ich werde Ihnen den Teil dieses Projekts zeigen , in dem es darum geht, dieses Projekt abzuschließen. Zunächst müssen Sie die SVG-Karte Ihres Landes herunterladen. Ich komme aus Indien, also lade ich Indian Map herunter und starte diese Website mapwgi.com Hier können Sie jeden Bundesstaat Indiens einzeln markiert sehen Sie können auch die Namen der Bundesstaaten sehen, wenn Ich werde diese Karte für dieses Projekt herunterladen. Lassen Sie uns also mit dem Praktischen beginnen und sehen, wie wir dieses Projekt erstellen können. Wie Sie sehen können, bin ich in meinem Browser und werde mit der rechten Maustaste darauf klicken. Nachdem ich den Bereich Elemente in meinem Ozon ausgewählt habe, bewege ich den Mauszeiger in allen Bundesstaaten dieses Landes und wähle einen der Bundesstaaten aus, und ich wähle diesen kleinen Bundesstaat Misoam Nachdem ich diesen Bundesstaat ausgewählt habe, hat dieser Pfad, wie Sie in meinem Elemente-Bereich sehen können, Sie in meinem Elemente-Bereich sehen können, bereits einen Titel Außerdem hat es eine ID, NI N. Diese ID ist also sehr wichtig Mit dieser ID können Sie eine Animation darauf ausführen. Also kopiere ich diese ID. Und wie Sie sehen können, öffne ich diese ganze C-Datei im Visual Studio-Code-Editor. Und wie Sie sehen können, wurde jeder Bundesstaat dieses Landes von PutTag erstellt Und jetzt werde ich denselben Mzurum-Staat anhand seiner ID finden denselben Mzurum-Staat anhand Also drücke ich Control AF und füge hier den ID-Namen ein. Und hier ist es. Also müssen wir zuerst die Bewegungsanimation für diesen Zustand erstellen . Also füge ich hier zunächst ein abschließendes Put-Tag hinzu, und innerhalb dieses Pt-Tags verwende ich das VG-Tag, was Animate Transform bedeutet Für bewegte Animationen ist dieses Tag sehr wichtig. Außerdem werde ich diesem Tag eine ID zuweisen. ID, die diesem entspricht, ist ein Misoram, also gebe ich MZ ein, und dann müssen wir den Attributnamen Attributname, gleich zu übergeben, und unser Attributname Und dann müssen wir den Attributtyp Attributtyp übergeben , der XL entspricht Und jetzt müssen wir den Animationstyp übergeben. Geben Sie gleich für Translate ein, und dann müssen wir den Wert für die Dauer der Animation übergeben , Dur entspricht vier Sekunden, und jetzt müssen wir die genaue Position übergeben aus wir die Animation starten müssen, und ich möchte diese Animation von dieser Stelle aus starten. Innerhalb der Werte übergebe ich X xs und YX ist 50 40, das ist der Startpunkt und ab Punkt werde ich 00 übergeben und außerdem müssen wir ein weiteres Attribut für diese Animation übergeben , nämlich repeat cow. Also hier bin ich ein T, wiederhole die Zählung gleich eins. Ich möchte diese Animation nur einmal ausführen. Wenn ich diese Datei sage und zurück zu meinem Browser gehe und diesen Browser neu lade, wie Sie sehen können, hat es perfekt funktioniert Hier kannst du sehen, wie dieser Staat an seinen eigenen Platz zurückkehrt Mit dieser Animation und dem Wert können Sie den Wiedervereinigungseffekt Ihres Landes erzeugen Und wenn Sie die Farbe Ihres Bundesstaates ändern möchten , müssen Sie dafür einige Eigenschaften verwenden Unser erster Eigenschaftsname ist auf Mouse. Und hier werde ich einen Farbschleier weitergeben. Ich werde diesen Punktstil eingeben, dem Punkt entspricht, und unser Farbname ist Grau. Wenn ich mit dem Cursor darauf fahre, wird die Farbe Grau zurückgegeben. Damit möchte ich einen Mouse-Out-Effekt hinzufügen. Hier tippe ich bei gedrückter Maus, was diesem Punktstil entspricht, der sich genauso anfühlt wie die grüne Farbe. Damit möchte ich eine Strichfarbe hinzufügen. Also hier werde ich diesen Punkt im Punktstil eingeben, Punkt , Strich, entspricht Rot. Lassen Sie uns die Datei einstellen und zurück zum Browser gehen. Hier können Sie sehen, dass unsere Animation perfekt funktioniert. Und wenn ich in diesem Zustand mein Auto fahre, wird es wieder grau. Und wenn ich die Maus verlasse, wird es, wie Sie sehen , grün und es wird eine Strichfarbe hinzugefügt, nämlich Rot. Ich hoffe also, jetzt ist es hervorragend für dich, wie ich dieses ganze Projekt erstelle. Einer nach dem anderen müssen Sie den Animationseffekt für jeden Status erstellen . Wenn Sie aus den USA , müssen Sie 50 Mal dasselbe tun. Ich hoffe, jetzt ist es für dich klar. Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf unsere nächste Übung. 35. Was sind SVG-Filter: Hallo, Leute. Schön , dich wieder zu sehen. Auch hier bin ich mit einem neuen Tutorial zu WiGi zurück . In diesem Tutorial werden wir VG-Filter lernen Die meisten fortgeschrittenen SVG-Animationseffekte wurden mit Filtern erstellt Außerdem können wir damit Bildeffekte erzeugen. In diesem Tutorial werden wir die Grundlagen von VG-Filtern untersuchen. Zunächst werden wir lernen, was AVG-Filter sind und wie sie sich von CSS-Filtern unterscheiden. Dann verwenden wir das Filterelement und lernen etwas über Filterprimitive Damit werde ich Ihnen einige Demonstrationen zeigen , wie wir es praktisch einsetzen können Was genau sind SVG-Filter? Bevor wir mit SVG-Filtern beginnen, müssen wir CSS-Filter verstehen. Wie Sie vielleicht wissen, haben wir in CSS bestimmte Funktionen , die wir für Unschärfe, Schlagschatten, Farboperationen usw. verwenden können Schlagschatten, Farboperationen usw. Außerdem können wir die Helligkeit der Farbtonsättigung mithilfe von CSS-Filtern steuern Helligkeit der Farbtonsättigung mithilfe von CSS-Filtern Diese Filter werden hauptsächlich in Bildern angewendet. Dies sind alles CSS-Filter, und um diese Filter verwenden zu können, müssen wir mit der Filterfunktion arbeiten. CSS-Filter sind jedoch ziemlich begrenzt. Wir verwenden sie meistens für Bilder, und auch die Funktionalität ist ziemlich einfach. Wenn Sie mehr Funktionalität wünschen, ansonsten komplexe Funktionen, müssen wir SVG-Filter verwenden. Und hier ist der interessante Teil. CSS-Filter sind eine Teilmenge von SVG-Filtern. CSS-Filter sind sehr einfach zu verwenden und verfügen über einfache Funktionen In CSS können wir beispielsweise Bilder verwischen, können wir beispielsweise Bilder verwischen, aber die Unschärfe ist Das gleiche Maß an Unschärfe gilt für alle Richtungen, aber in SVG können wir dieselbe Unschärfe mit den unterschiedlichen Werten Xxs und YxS machen den unterschiedlichen Werten Außerdem können wir die Kanten der Bildunschärfe kontrollieren. Sie könnten denken, dass SVG-Filter nur mit SVG-Elementen funktionieren . Das ist nicht wahr. Wir können es auf alle SML-Elemente anwenden. Um dies zu erstellen, müssen wir mit dem Filterelement beginnen. Außerdem müssen wir einige spezielle Funktionen verwenden, die als Filterprimitive bezeichnet Um zu beginnen, müssen Sie mit dem SVG-Tag und dann Filterelement innerhalb des SVG-Tags hinzufügen. Vergessen Sie nicht, diesem Filter-Tag eine ID hinzuzufügen , da diese ID als Referenz für diesen Filter und innerhalb dieses Filterelements müssen wir Primitive hinzufügen Dies sind alles SVG-Filter-Primitive. Das können wir innerhalb des Filter-Tags verwenden. Schließlich müssen wir die Filter anwenden , solange wir sie anwenden möchten. Angenommen, ich möchte diesen Filter auf ein Bild-Tag anwenden. In diesem Fall müssen wir den Attributnamenfilter eingeben, innerhalb des unteren Os entspricht, wir müssen URL eingeben und innerhalb des runden Ress müssen wir den Filter mit der ID verknüpfen, und es gibt eine Menge Primitive die Sie in Ihrem Filter verwenden können Und wenn Sie es bemerken, können Sie ein Präfix oder Obin sehen. Dieses Präfix steht für Filtereffekt. diesen Primitiven können wir einfache Effekte wie Unschärfe, Schlagschatten, Blitz usw. erzeugen . Außerdem können Sie damit Protoshok-Grad-Effekte, Biegemodus, Compositing, Displacement-Map usw. erzielen Biegemodus, Compositing, Displacement-Map Ab dem nächsten Tutorial werden wir mit dem Praktischen beginnen wir Das ist es für dieses Tutorial. Danke, dass du dir dieses Video angesehen hast. Bleib dran. 36. SVG-Filter-Implementierung: Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studio-Code-Editor und meinen Browser mit der Servererweiterung. Ich habe bereits eine HTML-Seite mit dem Namen Index Dot HTML erstellt. Und in diesem Body-Tag deklarieren wir ein SVG-Tag mit 750 und einer Höhe von 500 Und auch der Viewbox-Bereich ist S. Als Nächstes müssen wir ein Filterelement erstellen. Also werde ich innerhalb des SVG-Tags Filter eingeben. Außerdem müssen wir diesem Element eine ID zuweisen, die D entspricht . Innerhalb dieses Filterelements werden wir einen Filter Primitting hinzufügen Aber zuerst werden wir ein anderes Element erstellen, auf das ich diesen Filter anwenden werde, und unser Elementname ist image Hier werde ich Bild eingeben. Hier werde ich ein Attribut exceed verwenden. Link AUF HREF. Um den doppelten Verlauf einzufügen, müssen wir den Bildpfad angeben Sie können in meinem aktuellen Arbeitsverzeichnis sehen, ein Bild gibt, 01-Punkt-JPG Ich werde dieses Bild verlinken. Hier gebe ich 01 Dot JPG ein. Wenn ich diese Datei einstelle, können Sie in meinem Browser sehen , dass unser Bild erfolgreich verlinkt wird. Wenn Sie innerhalb der Höhe einstellen möchten, ja, das können Sie. Einfach zum Tippen. Gewicht, 100%. Auch die Höhe. Hoch, 100%. Auch wenn Sie die Startposition angeben möchten , ja, das können Sie. Dazu müssen Sie nur Xs und YxS X Null übergeben. Auch YxS Null. Wenn ich diese Datei einstelle, kannst du den Rhythmus sehen. Im Grunde entspricht meine Bildauflösung dieser Dimension. Deshalb werden sich diese Attribute nicht so stark auswirken. Dann zurück zum Hauptthema und erstelle den Filter. Wie Sie sehen können, ist es jetzt ein Bandfilter, aber ich möchte diesen Filter auf dieses Bild anwenden. Dafür müssen wir ein Attribut verwenden und unser Attributname ist Filter. Der Filter entspricht dem Wert is im Doppelkurs. Wir müssen URL eingeben. Die URL befindet sich an der Rundung jetzt müssen wir dieses Bild mit Hilfe der ID mit diesem Filter verknüpfen Hilfe der ID mit diesem Filter Hier gebe ich Hastag Demo ein. Wenn ich diese Datei einstelle, ist sie, wie Sie sehen können, komplett leer Jetzt können Sie das Bild nicht sehen , da der Filter angewendet wird. Außerdem ist der Filter schwarz. Gehen wir und fügen einige Primitive hinzu. Zuerst möchte ich eine zu starke Farbe auf dieses Bild auftragen, und dann werden wir einen Mischmodus Das erste Primitiv , das ich für Volltonfarben verwenden werde , ist KI-Flirt, dieses Also hier werde ich einen Flirt eingeben. Und für Primitive müssen Sie selbstschließende Tags verwenden. Wenn ich diese Datei einstelle, wird standardmäßig die schwarze Farbe zurückgegeben, und jetzt füge ich eine dritte Farbe hinzu Oder das, und ich muss ein Attribut übergeben, Farbe des Flutstrichs Wie innerhalb des Doppelkurses werde ich ein Hexa VH Dag Double Zero S Double Zero bestehen VH Dag Double Zero S Double Zero Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Es ist grün geschrieben. Wenn Sie die Opazität kontrollieren möchten, ja, das können Sie. Dafür müssen Sie ein anderes Attribut verwenden und der Attributname lautet flood Opacity Flood Bindestrich Opacity. Entspricht, für eine Opazität von 100% müssen wir eins übergeben Wenn ich diese Datei einstelle, siehst du eine Deckkraft von 100%. Als Nächstes müssen wir ein anderes Tag verwenden, das Ergebnis ist. Also Ergebnis vom Typ Hämo. Ergebnis. Ist der Doppelkurs, ich werde die Flut bestehen. Dieses Primitiv kann mit anderen Primitiven kombiniert werden und um es mit einem anderen Primitiv zu kombinieren, können wir das Ergebnisattribut als ID verwenden Wir können die ID eines anderen Primitivs verwenden , um beide Primitive zu kombinieren Als Nächstes möchte ich ein weiteres Primitiv für den Mischmodus hinzufügen. Dafür werden wir diesen primitiven FE-Mischfilter zum Kombinieren von Bildern verwenden FE-Mischfilter zum Kombinieren von Bildern Hier gebe ich FE-Mischung ein. Hier, in diesem speziellen Fall, müssen wir zwei Quellen übergeben. Unser erstes Attribut ist E der Quellgrafik mit doppelten Anführungszeichen entspricht. Graph Source Guppix bedeutet im Grunde das Bild genau hier. Wenn ich diese Datei einstelle, kannst du das Ergebnis sehen. Nachdem wir die Quelle Guppy eingegeben haben, können wir unser Bild wieder sehen Jetzt möchte ich diese Quelle Guppy mit diesem primitiven Flut brandmarken Guppy mit diesem primitiven Hier müssen wir eine andere Quelle übergeben, Guppy. Hier tippe ich gleich in den Doppelcode Flood Also verknüpfen wir unsere zweite Quelle Grape mit diesem Ergebnis. Als Nächstes müssen wir den Mischmodus bestehen. Hier übergebe ich den Modus, innerhalb der Doppelcodes gleich ist: Color Burn Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Hey, es ist keine Arbeit. Lass uns eine andere Farbe verwenden und sie dann auftragen. Ich gebe eine andere Farbe weiter. Es ist eine blaue Farbe. Wenn ich diese Datei einstelle, wie Sie sehen, funktioniert sie jetzt. Es passt sich der Farbe an das Bild an. So können wir SVC-Filter verwenden. Dies ist das erste Beispiel für einen VC-Filter. Im nächsten Tutorial werde ich Ihnen ein weiteres Beispiel für einen VC-Filter geben ein weiteres Beispiel für einen VC-Filter 37. SVG feColorMatrix-Filter: Hallo, Leute. Schön , dich wieder zu sehen. Ich bin wieder mit einem weiteren Tutorial zu Primitiven zurück einem weiteren Tutorial zu Primitiven In unserem vorherigen Tutorial haben wir bereits gelernt, wie wir Primitive mit VG-Fittern verwenden können Und in diesem Tutorial werden wir dieses Primitiv, eine Farbmatrix, lernen Dieses Primitiv wird speziell zum Filtern nach Farbtransformationen verwendet . Dieser Filter Apple-Matrix, Transformation zur Änderung der Farbe des Eingabepixels. Sie können es für Farbmanipulationen wie Graustufenkonvertierung, Farbverschiebung usw. verwenden Und in unserem praktischen Beispiel werde ich Ihnen zeigen, wie wir ein Farbbild in ein Graustufenbild umwandeln können Farbbild in ein Graustufenbild umwandeln Lasst uns also praktisch lernen. Wie Sie sehen können, öffne ich Seite an Seite meinen Wizz Studio-Code-Editor und meinen Browser mit der Light-Servererweiterung und erstelle bereits ein ML-Dokument mit dem Namen Index Two Dot TML dem Namen Index Two Dot TML In unserem vorherigen Tutorial haben wir bereits gelernt, wie wir SVG-Filter verwenden können Wie Sie wissen, müssen wir unserem Filter zunächst eine ID zuweisen. Also werde ich denselben ID-Namen, AI-Farbmatrix, zuweisen. Also kopiere ich das und füge es hier ein. Dann müssen wir diesen Filter in unserem Bild anwenden. Also hier werde ich das HAS-Tag und unsere KI-Farbmatrix für unseren ID-Namen übergeben . Wenn ich diese Datei einstelle, wird sie, wie Sie wissen, leer zurückgegeben. Da unser Filter leer ist , wurde er auch leer zurückgegeben. Wie ich Ihnen bereits sagte, werde ich diesen Filter für die Graustufenkonvertierung verwenden . Also werde ich diesen Filter AI-Farbmatrix nennen und dieses Tag schließen. Zuerst verwende ich innerhalb der Farbmatrix das Typattribut Type =, und innerhalb der Dule-Codes übergebe ich saturate, nachdem ich diese Datei gesetzt Sie können das Ergebnis sehen, aber wir übergeben keine Werte Filter können wir die Farbsättigung dieses Bildes steuern Farbsättigung dieses Bildes steuern Dafür müssen wir also die Werte übergeben. Also gebe ich stattdessen den Wert ein, der den doppelten Codes entspricht. Zuerst werde ich 0,9 bestehen. Nach dem Einstellen dieser Datei gibt es, wie Sie sehen können, geringfügige Änderungen. Sie können die Änderungen nicht identifizieren , da Sie hier einen Wert zwischen 0,92 und 0,1 übergeben müssen Wenn ich also 0,1 übergebe und diese Datei dann setze, wie Sie sehen, wird unser Bild fast entsättigt, aber es wird unser Bild nicht vollständig entsättigt Wenn ich 0,0 übergebe und dann diese Datei setze, kannst du jetzt sehen, dass das Bild jetzt komplett entsättigt wird Hier müssen Sie einen Wert zwischen 0,021 übergeben. Wenn ich eine übergebe und diese Datei, können Sie jetzt sehen, dass unser Bild vollständig gesättigt ist Sie können alle Farben sehen. Aber wenn ich 0,5 weitergebe und das in dieser Datei nach oben, reduziert dieser Filter jetzt die Sättigung der Farben im Vigi-Element, und er hat die Farbe um 50% reduziert, weil wir hier 0,5 übergeben Nicht nur das, wir können denselben Filter auch in AVG Elements anwenden denselben Filter auch in AVG Elements Also hier werde ich ein Reaktionselement erstellen. Und zuerst weise ich mit gleich hundert zu. Außerdem werde ich der Höhe eine Höhe zuweisen, die 100 entspricht. Dann werde ich Farbe zuweisen. Ich möchte mit blauer Farbe füllen. Also hier werde ich das Style-Attribut eingeben. Stil, um die Farbe anzuwenden Wie Sie wissen, müssen wir die Feldwahrscheinlichkeit verwenden. Blau füllen. Dann werde ich den Filter anwenden. Um den Filter anzuwenden, müssen wir, wie Sie wissen, das Filterattribut verwenden. Filter, Doppelpunkt und wir müssen die URL übergeben. Dann legen Sie das URL-Tag fest. Zuerst müssen wir den Hashtag übergeben, dann müssen wir den Filter anwenden Aber bevor ich diesen Filter anwende, legen wir die Geldbuße fest. Bis zum Einstellen dieser Datei, hier seht ihr das Ergebnis. Hier erstellen wir ein Reaktionselement mit blauer Farbe. Und jetzt werde ich diesen Filter anwenden, die AE-Farbmatrix. Also kopiere ich diese ID-Filter-ID übergebe sie dann hier. Apra hat diese Datei so eingestellt, dass sie, wie Sie sehen können, den blauen Farbwert um 50% reduziert Und wenn ich eine übergebe, nur eine und dann diese Datei einstelle, kannst du das Ergebnis sehen Und wenn du sie komplett entsättigt machst, dann nur noch bis zum Nullpunkt. Jetzt wird es komplett entsättigt. Jetzt gibt es keine Farbe in diesem Bild, auch in diesem Reaktionselement. So können wir es also verwenden. Lassen Sie mich Ihnen nun ein anderes Beispiel zeigen. Eine weitere Verwendung dieses Filters. Wir haben also bereits gelernt, wie wir diesen Filter für Sättigungszwecke verwenden können. Und jetzt werde ich denselben Filter für benutzerdefinierte Farben verwenden . Also werde ich wieder Filter-Tag eingeben. Außerdem werde ich eine ID zuweisen, und dieses Mal hat unser ID-Name eine benutzerdefinierte Farbe. Dann werde ich dieses Tag schließen. Dann werde ich in diesem Filter FE-Farbmatrix-Primitiv verwenden. Ein Farbmatrix-Primitiv. Er gibt eine Farbmatrix ein. Ich brauche dieses abschließende Tag nicht , weil ich dieses einzelne Tag benötige. Und dann übergebe ich hier ein Attribut, und unser Attributname ist type. Im Grunde können wir dieses Primitiv einfach kopieren und ich werde es hier ersetzen. Dann werde ich den Typ ändern. Hier übergebe ich einen Typ namens Matrix. Diesmal verwenden wir dieses Primitiv mit Matrixtyp, und jetzt müssen wir die Werte übergeben. Aber dieses Mal enthält das Wertattribut eine Matrix von vier mal fünf , die die Farbtransformation definiert. Im Grunde genommen wollen Sie sagen, dass wir hier insgesamt vier Zeilen übergeben müssen, und wir müssen bis zu fünf Werte in jeder Zeile übergeben. Jede Zeile der Matrix entspricht einem der Ausgangsfarbkanäle. Unsere erste Zeile steht für rote Farbe. Unsere zweite Reihe steht für grüne Farbe, unsere dritte Reihe steht für blaue Farbe und unsere vierte Reihe steht für Alpha. also, ohne Sie zu verwirren Lassen Sie mich also, ohne Sie zu verwirren, einen Wert angeben. Also werde ich in unserer ersten Zeile diesen Wert übergeben, 0,5. Dann übergebe ich Null. Unser nächster Wert ist Null, Leerzeichen, Null und Null. Wenn Sie es bemerken, können Sie in unserer Zeile sehen, dass wir hier insgesamt fünf Werte übergeben. Diese erste Zeile steht für den roten Kanal, roten Farbkanal, und hier übergeben wir 50% rote Farbe. Dann werde ich in der zweiten Reihe den grünen Farbkanal übergeben, und ich möchte 100% grün auftragen. Also übergebe ich zuerst Null, dann übergebe ich Eins, Leerzeichen, Null, Leerzeichen Z. Wie ich Ihnen schon gesagt habe, wird jede Zeile fünf verschiedene Werte enthalten. Unsere zweite Reihe steht für grünen Kanal, 100% grünen Kanal, aber unsere erste Reihe steht für 50% roten Kanal. Dann übergebe ich in unserer dritten Zeile den Wert für den blauen Kanal. Also Null Leerzeichen, Null, Leerzeichen Eins, Leerzeichen Null und Null zu übergeben . Als Nächstes müssen wir den Alpha-Wert übergeben. Für den Alpha-Wert übergebe ich Null Leerzeichen, Null, Leerzeichen, Null, Leerzeichen, Null. Wie ich Ihnen bereits sagte, steht unsere letzte Zeile für Opazität, Alpha-Wert Und jetzt werde ich diese Datei einrichten und denselben Filter auf dieses Bild anwenden Also werde ich dieses Bild duplizieren und die vorherige Zeile auskommentieren. Und dieses Mal werde ich diese Filter-ID kopieren und durch diesen Filter ersetzen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wie Sie sehen können, wird diesem Bild eine neue Filterebene hinzugefügt. Und wenn du den sonst verringerten Kanalwert erhöhst , lass es mich dir zeigen. Angenommen, ich möchte den Wert des roten Kanals erhöhen. Ich möchte neun daraus machen und dann diese Datei einstellen, Sie können das unterschiedliche Ergebnis sehen. Also so hat es funktioniert. Im Moment werde ich den roten Kanal zu 50% verwenden. Auf die gleiche Weise können Sie den Wert des grünen Kanals ändern. Nehmen wir an, ich übergebe 0,5 und lasse diese Datei ruhen Jetzt können Sie einen anderen Effekt sehen. Wenn Sie Experte in diesem Bereich werden möchten, sollten Sie grundsätzlich über Grundkenntnisse in der Fotobearbeitung verfügen. Außerdem sollten Sie Kenntnisse über Subta wie Photoso haben. Dann kannst du diesen Wert sehr gut verstehen. So können wir dieses Primitiv also verwenden. Ich hoffe, jetzt ist es für dich klar. Aus dem nächsten Tutorial werden wir die restlichen lernen. Das ist es also für dieses Tutorial. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf das nächste Tutorial. 38. FeComponentTransfer: Hallo Leute, schön, dass ihr wieder da seid. Ich bin wieder mit einem weiteren Tutorial zurück. Verwandt ist WiFilter und in diesem Tutorial sind wir gut darin, diesen Filter, die Übertragung von KI-Komponenten, zu erlernen Dieses Filterelement implementiert die Farbmanipulation für jeden Farbkanal separat Wie Sie wissen, haben wir drei Farbkanäle Rot, Grün und Blau. Damit haben wir auch einen anderen Kanal namens Alpha. Wie Sie wissen, können wir die Transparenz mit diesem Farbkanal steuern . Die vier Farbkanäle in diesen Elementen sind FI, Funk, RFI, Funk G, FFunkV und FI, Funk A. Um diesen Filter verwenden zu können, müssen wir also diesen Farbkanal innerhalb dieses Filters verwenden Und bei der Farbmanipulation sollten die Elemente nur ein untergeordnetes Element jedes Typs haben , und wir haben nur ein Attribut, das in ist, und es wird verwendet, um Eingaben für das angegebene Primitiv zu speichern Und in unseren Elementen können wir insgesamt nur vier Typen von diskreten Gamma-Linear-Tabellen zusammenzählen. also, ohne Ihre Zeit zu verschwenden, Lassen Sie uns also, ohne Ihre Zeit zu verschwenden, mit der Praxis beginnen und sehen, wie wir diese Filter verwenden können Wie Sie sehen können, habe ich zusammen meinen Result Studio-Code-Editor und meinen Browser mit der Light-Server-Erweiterung geöffnet meinen Browser mit der Light-Server-Erweiterung und bereits ein Schätzdokument mit dem Namen Index Table erstellt dem Namen Index Table In diesem TML-Tag haben wir also ein SVG-Tag, und hier legen wir die Höhe fest, und wir sagten auch das Ansichtsfeld Im Moment ist es ein leerer Filter, aber wir haben eine ID-Demo eingerichtet Ebenfalls in diesem SVG-Tag verlinken wir ein Bild, und Sie können das Bild in meinem Browser sehen. Jetzt werde ich diesen Filter erstellen. In diesem Filter-Tag werde ich also dieses Primitiv verwenden, das ist die Übertragung von A-Komponenten. Dann werde ich in diesem Privitiv zuerst das Alpha-Element verwenden Also Hämotype FV SNC AF Alpha. Dann werde ich dieses Tag schließen. Zuerst verwende ich innerhalb dieses Elements das Typattribut, T Tip entspricht innerhalb der Duel-Codes, und ich gebe Tabelle ein. Wie ich dir schon sagte, müssen wir nach Typ unterscheiden. Also werde ich zuerst den Tabellentyp verwenden. Dann müssen wir ein anderes Attribut verwenden , nämlich den Tabellenwert. Entspricht uns bei den Tobon-Codes. Hier müssen wir die Werte übergeben. Für den Alpha-Wert übergebe ich Null Leerzeichen, Null Leerzeichen Eins, Leerzeichen Eins. Und dann werde ich einen weiteren Kanal erstellen, nämlich den U-Kanal. Also werde ich diesen Abschnitt beginnen A durch B und Hämotyp Null, Eins ersetzen, dann werde ich Null , Eins bestehen Als Nächstes wende ich den grünen Kanal an. Also wieder, ich werde diese Linie sein und B durch G ersetzen, und ich werde die Werte ändern. Zuerst gebe ich Eins, Leerzeichen Eins, Null, Null ein und zuletzt wende ich den roten Farbkanal an. Also werde ich durch R ersetzen und die Werte ändern. Zuerst gebe ich Null, Leerzeichen Null, Leerzeichen Eins, Leerzeichen Null ein. Ich werde diese Datei einrichten. Und jetzt werde ich diesen Filter auf dieses Bild anwenden. Und dafür, wie Sie wissen, tippt er gerne URL ein. Dann stellst du die runden Pressen ein, ich verwende IDs. Jemand benutzt diese ID, also möchte ich das Hastex-Zeichen weitergeben, und dann gebe ich den ID-Namen dim weiter Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wie Sie sehen können, wird der modifizierte Farbkanal in diesem Bild angewendet . Diese Art der Zuordnung kann für benutzerdefinierte Farbtransformationen oder Effekte in Vrapis nützlich sein für benutzerdefinierte Farbtransformationen oder Effekte in Vrapis nützlich . Sie können mit diesem Wert spielen, um die Kanäle zu verfolgen Das ist es also für dieses Tutorial. Ich hoffe, jetzt ist es für dich klar. Im nächsten Tutorial werden wir ein anderes Primitiv lernen. Also danke, dass du dir dieses Video ruhig angesehen hast. 39. SVG feComposite-Filter: Hallo Leute. Schön, dich wieder zu sehen. Ich bin wieder mit einem anderen Tutorial zurück, und in diesem Tutorial werden wir ein weiteres SVG-Filter-Primitiv lernen. Wir werden uns auf AI Composite konzentrieren. Nun stellt sich die Frage, was ist Fi Composite? Ein Composite wird verwendet, um mehrere Bilder oder Grafikelemente zu kombinieren . Damit können Sie angeben, wie verschiedene Quellbilder oder -elemente zusammengesetzt werden sollen , um ein Endergebnis zu erzielen. Das AI-Verbundelement wird in der Regel in AVG-Filtern verwendet , um komplexe Bildverarbeitungseffekte anzuwenden. Sie können AI Composite beispielsweise verwenden, um Operationen wie Kombinieren von zwei Bildern mithilfe von arithmetischen Operatoren wie Add Subtract Multiple oder Overlay Es ist ein sehr leistungsstarkes Tool zum Erstellen erweiterter visueller Und es ist mit einem Operator wie Over-In, Atop, Out, ZO-Lichter oder Arithmetik ausgestattet Bevor ich mit der Praxis beginne, möchte ich Ihnen einige Beispiele zeigen Wie Sie sehen können, öffne ich die Adobe Illustrator-Software, und in dieser Software erstelle ich hier zwei Elemente Zuerst erstelle ich ein Kreiselement und über dem Kreiselement ein Sternelement Jetzt werde ich einige Operationen mit Pathfinder durchführen. Einige Pathfinder-Operationen sind bei AI Composite Primitive ziemlich ähnlich Also wähle ich sowohl das Element im Pfadfinder diese Option minus Zurück aus diese Option minus Zurück Bis zur Auswahl minus zurück können Sie das Ergebnis sehen. Als Nächstes wähle ich eine weitere Option, nämlich Zuschneiden nach oben. Sie können das Ergebnis sehen. Diese Art von Operation können wir mit ein paar Kompositen durchführen. Außerdem können wir diese Operation und diese Operation und diese minus Fon ausführen. Lassen Sie uns mit dem Praktischen beginnen und sehen, wie wir es nutzen können. Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studio-Code-Editor und meinen Browser mit der Light-Server-Erweiterung. Ich habe bereits einen SVG-Filter erstellt, und wir weisen diesem Filter eine ID zu: Composite-Filter. Und bevor ich den SVG-Filter erstelle, definieren wir zunächst das SVG-Bild und ihr Set mit 400 Pixeln und einer Höhe von 400 Pixeln. Dann erstellen wir innerhalb dieser Tiefenphase den Filter, den Verbundfilter. Dann verwenden wir das AV-Image-Tag, um das Bild zu laden. Er benutzt zwei AV-Image-Tags. Der erste ist für das Hintergrundbild. Kreisform ist unser Hintergrundbild und die Sternform ist unser Vordergrundbild. Außerdem speichern wir sie als Hintergrundergebnis und Vordergrundergebnis. Dann verwenden wir ein zusammengesetztes AI-Primitiv, aber wir verwenden keinen Operatorwert. In AI Composite müssen wir hier insgesamt drei Attribute, Operator-Attribut, In-Attribut und True-Attribut verwenden Operator-Attribut, In-Attribut . Bei in-Attribut muss Hen die erste Bildquelle übergeben und in attribute muss sie die zweite Bildquelle übergeben. Schließlich wenden wir diesen Filter auf ein Bildelement an , das das Hintergrundbild anzeigt. Sie wissen bereits, wie wir Filter in unserem Bild anwenden können. Jetzt werde ich alle Operatoren nacheinander anwenden. Zuerst werde ich mich über den Operator bewerben. Dies ist der Standardoperator. Nach Schritt gibt es an dieser Datei, wie Sie sehen können , keine Änderungen, dann werde ich den Operator in verwenden. Nachdem Sie diese Datei eingerichtet haben, können Sie die Änderungen sehen. Der Teil dieser Quellgrafik, der durch ein Attribut definiert ist , das sich mit der Zielgrafik überschneidet, die durch das Into-Attribut definiert ist, und im Operator ersetzt die Zielgrafik. Jetzt verwende ich einen anderen Operator, der nicht mehr verfügbar ist. Nachdem ich diese Datei eingerichtet habe, können Sie das Ergebnis sehen. Die durch das In-Attribut definierten Teile der Quellgrafik , die außerhalb der Zielgrafik liegen, werden im In-Attribut definiert Im Grunde genommen lasse ich den Kreisbereich vom Stern weg und verwende dann einen anderen Wert, nämlich einen oberen Wert Nachdem Sie diese Datei eingerichtet haben, können Sie das Ergebnis und die Auswirkungen sehen. Als Nächstes verwende ich einen anderen Wert ZR. Nachdem Sie diese Datei festgelegt haben, können Sie das Ergebnis sehen. Diese Operationen sind bei Adobe Illustrator Pathfinder ziemlich ähnlich bei Adobe Illustrator Pathfinder diesem Grund beginne ich dieses Tutorial mit Ado V Illustrator, um Ihnen eine Vorstellung davon zu geben , welche Art von Operation wir durchführen werden Unser nächster Wert ist leichter. Ich werde ZR durch er ersetzen. Nachdem Sie diese Datei eingerichtet haben, können Sie das Ergebnis sehen. Jetzt ist noch ein Operator übrig , der ein arithmetischer Operator ist, und er hat insgesamt vier Werte, K, K zwei, K drei und K Hier werde ich Arithmetik verwenden. Dann müssen wir die vier Werte übergeben. Zuerst übergebe ich K. K gleich innerhalb des doppelten Codes, ich übergebe 0,1. Dann übergebe ich K, wobei K gleich 0,2 ist. Dann werde ich bestehen, K drei entspricht 0,3. Und zuletzt werde ich K bestehen, K vier entspricht 0,4. Bis zur Einstellung dieser Datei können Sie das Ergebnis sehen. Das können wir tun, wenn Sie Primitive zusammensetzen. Ich hoffe, jetzt ist Ihnen klar, wie wir diesen verwenden können. Also danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf das nächste Primitive. 40. SVG feConvolveMatrix-Filter: Hallo Leute, schön, dass ihr wieder da seid. Ich bin wieder mit einem weiteren Tutorial SVG-Filter-Primitiven Und in diesem Tutorial werden wir die KI-Faltungsmatrix lernen Die AE-Faltungsmatrix ist ein SVG-Filter-Primitiv , mit dem Sie eine Zwei-D-Faltungsoperation an einem Eingabebild durchführen können eine Zwei-D-Faltungsoperation an einem Eingabebild durchführen Bei dieser Operation wird jedes Pixel im Bild mit den umgebenden NIORs kombiniert jedes Pixel im Bild mit den umgebenden . Dabei wird eine fleischliche Matrix verwendet, um einen neuen Und wenn ich von Attributen spreche, dann ist es das Gaialten-Attribut Gaialten-Attribut In welcher Kernelmatrix, Divisor, Bias, Zielziel Y, H-Modus, erhaltenes Alpha, Länge der Kerneleinheit usw. Lassen Sie uns nun über die Syntax sprechen. Eine Faltungsmatrix, und das sind die Attribute, die wir in dieser Syntax verwenden müssen Wir müssen nicht alle Attribute auf einmal verwenden. Je nach Bedarf können wir diese Attribute verwenden. Wenn ich über diese Attribute spreche, befindet sich unser erstes Attribut in der Speichereingabe für das angegebene Primitiv. Unser zweites Attribut ist Ordnung. Es testet die Größe der Matrix, die vom Filterelement verwendet werden soll. Standardmäßig ist es drei mal drei. Dann kommt Erneel Matrix. Es definierte die Liste der Zahlen aus der Kernel-Matrix Der Kernel ist ein einfacher Kantenerkennungsfilter, bekannt als Svaloperator zur Erkennung vertikaler Unser nächstes Attribut ist Divisor. Es ist als Summe der Werte der Kernelmatrix definiert. Standardmäßig ist sie auf eins gesetzt. Unser nächstes Merkmal ist Voreingenommenheit. Ich habe den Bereich des Filters eingestellt. Standardmäßig ist er auf Null gesetzt. Dann haben wir Ziel X und Ziel Y. Lassen Sie uns nun mit dem Praktischen beginnen Zuerst werde ich dieses Attribut Kernel-Matrix anwenden. Lassen Sie uns in den Visual Studio-Code springen. Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studio-Code-Editor und meinen Browser mit der Live-Servererweiterung und erstelle bereits ein HTML-Dokument mit dem Namen Index Dot HTML dem Namen Index Dot In unserer Körpermarke haben wir also eine Perücke, und hier sagen wir mit 100% und Körpergröße und Körpergröße 400 Und dann haben wir Diptag in diesem Dip-Tag, wir werden den Filter erstellen Aber bevor ich den Filter erstelle, wollen wir erklären, was wir hier gemacht haben Zuerst verwenden wir ein React-Tag. Wie Sie in diesem React-Tag sehen können, setzen wir auf 500 und Höhe 300 und hier sagen wir Strichfarbe und auch Füllfarbe dunkelgrün. Und dann verwenden wir das Gruppenelement. Und in dieses Gruppenelement geben wir den Text Hello World ein. Und hier sagte ich, Formulargröße 34 Pixel und Schriftfamilie Vardana Und wie Sie sehen können, ist unsere Textfarbe weiß Er verwendet einen Hexa-Wert. Lassen Sie uns nun den Filter erstellen und versuchen zu sehen, was er physisch zurückgeben wird Sie haben also dieses Deep-Tag gesagt, ich gebe Filter-Tag ein. Dann setze ich eine ID für diesen Filter, ID entspricht Convolve Dann verwende ich innerhalb des Filter-Tags das Primitiv, das ist die FE-Konvolvenmatrix Versuchen Sie es also mit FE-Konvolvenmatrix. Ich glaube, ich habe einen Rechtschreibfehler gemacht. Es ist KI, es sollte AV sein, nicht FR. Dann schließe dieses Tag. Wenn Sie dann die Matrix bestätigen, verwende ich ein Attribut, das fleischlichen Matrix entspricht und Werte übergeben muss, einige fleischliche Werte Und wie ich Ihnen schon sagte, nimmt unsere fleischliche Matrix standardmäßig 33 Rasterwerte und 33 Rasterstrukturwerte an. Lassen Sie mich Ihnen zeigen, wie ich in unserer ersten Reihe ein Leerzeichen fünf, Leerzeichen minus eins übergebe Dann übergebe ich in unserer zweiten Reihe minus ein Leerzeichen Null, Leerzeichen vier. Dann übergebe ich in unserer dritten Reihe Null, Leerzeichen Null und minus Eins. Die erste Zeile der Kardinalmatrix ist 15 minus eins. Dieser Wert entsprach den Gewichtungen, die bei der Faltung für die erste Pixelzeile verwendet wurden der Faltung für die erste Pixelzeile Der Wert der zweiten Zeile ist minus eins, null und vier. Dies sind Gewichte des Pixels der zweiten Zeile. Im Grunde werden wir mit diesem Primitiv einige Pixelmanipulationen durchführen diesem Primitiv einige Pixelmanipulationen Dieses ist primitiv auf sehr fortgeschrittenem Niveau, auch wenn ich nicht die richtigen Kenntnisse darüber habe, und die dritte Zeile steht für die Gewichtung der dritten Pixelreihe Und jetzt werde ich diesen Filter auf mein React-Tag und den Text anwenden mein React-Tag und den Text Hier werde ich das Filterattribut verwenden. Filter entspricht innerhalb der Doppelcodes, ich übergebe die URL, die URL, dann drücke ich in der Runde auf den Hashtag, ich gebe diese ID weiter Außerdem werde ich denselben Filter in meinem Text aufrufen. Also werde ich den Filterabschnitt kopieren und in mein Text-Tag, nach dem Y-Wert, nach dem Y-Attribut, diesen Filter einfügen. Ich werde diesen Filter nennen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Wenn Sie sich meinen Text nun genau ansehen, wird, wie Sie sehen können, die Schärfe dieses Textes verringert. Es sieht so aus, als ob unser Text wackelt. Es wirkt sich auch auf meine rechteckige Form aus. Es wäre klarer, wenn ich die Schriftgröße reduzieren würde. Wenn ich zehn Pixel draus mache und dann diese Datei serviere, seht ihr das Ergebnis. Jetzt können Sie sehen, jetzt können Sie sehen, dass das Pixel dieses Textes zerstört wurde. Das können wir mit diesem Filter machen. Fügen wir nun ein Bild hinzu und versuchen, diesen Filter auf dieses Bild anzuwenden. Nach dem Gruppen-Tag füge ich den Bildquellcode ein. Ich habe den Code bereits aus unserem vorherigen Tutorial kopiert. Dann werde ich diese URL-ID entfernen . Ich werde diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, können Sie das Ergebnis sehen. Das ist unser Bild. Wenn ich nun diesen Filter auf dieses Bild anwende, kopiere ich diese Filter-ID, und hier verwende ich Haztexine und füge dann den Code und dann den ID-Namen Wenn Sie nach Schritt diese Datei bemerken, wirkt sich dies ein wenig auf unser Bild Spielen wir mit den Werten. Ich werde die Werte ändern, Kernel-Matrix. Zuerst übergebe ich unsere erste Reihe minus sieben. Unser nächster Wert ist minus, ich mache ihn minus zehn, und der dritte Wert ist, ich mache ihn auf -15 Dann fange ich in unserer zweiten Reihe mit minus zehn an Dann ist unser nächster Wert ebenfalls zehn. Dann ist unser dritter Spaltenwert minus eins. Für die dritte Spalte bleibe ich unverändert. Lassen Sie uns nach Schritt dieser Datei sehen, was sie zurückgeben wird. Nach Schritt dieser Datei ist es jetzt klarer für Sie. Nachdem Sie den Wert geändert haben, können Sie jetzt sehen, dass er unser Bild ein wenig unscharf macht Jeder Wert in der Kernel-Matrix beeinflusst, wie die Konvulsionsoperation die Eingabepixelwerte kombiniert , um die Ausgabepixelwerte zu erzeugen Wenn ich positive Werte übergebe, werden negativen Werte des Features verbessert während negative Werte sie möglicherweise übertreffen Das mittlere Pixel der fleischlichen Matrix multipliziert sich im Grunde mit den umliegenden Pixeln und es entsteht ein neues Pixel und dann wird das Pixel zurückgegeben Sie müssen nur bedenken, dass der SVG-Filter I Convolve Matrix sehr leistungsfähig sein kann, aber es kann einige Experimente erfordern , um den gewünschten Effekt zu erzielen Das ist es für dieses Tutorial. Ich hoffe, ich kann Ihnen eine kleine Einführung geben, wie wir den AI Convol-Matrixfilter verwenden können Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf das nächste Tutorial 41. SVG feDiffuseBeleuchtungs-Filter: Hallo Leute. Schön, dich wieder zu sehen. Ich bin wieder mit einem weiteren VG-Filter zum Thema Tutorial zurück. Und in diesem Tutorial werden wir dieses Primitive lernen, eine diffuse Beleuchtung Primitiv für diffuses Licht mag ein Bild, das den Alphakanal als Bumpmap verwendet Bei Verwendung von diffusem Licht ist die dem Licht zugewandte Seite des Objekts heller und die abgewandte Seite dunkler und Und bei diffusem Licht werden wir drei weitere Grundelemente lernen: Ich entferne Licht, wenn Punktlicht, und ich Außerdem benötigen wir ein zusammengesetztes Primitiv. Zusammen mit diesem Privativ können wir verschiedene Lichteffekte, Fernlicht, Punktlicht, Spotlicht usw. erzeugen Fernlicht, Punktlicht, Spotlicht usw. Lassen Sie uns nun über einige Attribute sprechen. Dies sind die Attribute , die wir bei diffusem Licht in Bezug auf Oberflächenskala, Streukonstante, Kernellänge, Kerneleinheitenlänge usw. benötigen diffusem Licht in Bezug auf Oberflächenskala, Streukonstante, Kernellänge, Kerneleinheitenlänge . Das in-Attribut identifiziert die Eingabe für das angegebene Unser nächstes Attribut ist die Oberflächenskala. Ich repräsentiere die Höhe der Oberfläche. Sein Wert wird mit dem Alpha-Wert multipliziert. Der Standardwert ist eins. Das nächste Attribut ist diffuser Inhalt. Es ist eine nicht negative Zahl, deren Standardwert Eins ist, und dann haben wir die Länge der Kernel-Einheit Sie gibt den beabsichtigten Abstand zwischen aufeinanderfolgenden Spalten an. Lassen Sie uns mit dem Praktischen beginnen und sehen, wie wir es anwenden können. Wie Sie sehen können, öffne ich Seite an Seite meinen Studio-Code-Editor und meinen Browser mit LipseExtension und erstelle bereits ein HTML-Dokument mit dem Namen Index Dot dem Namen In unserem Body-Tag haben wir also ein VG-Tag, und in diesem VG-Tag richten wir zunächst eine Leinwand ein, und unsere Leinwand variiert um 440 Pixel und die Höhe beträgt 140 Pixel Dann erstelle ich einen Kreis und unsere Kreisfarbe ist grün, und ich tippe kein Licht ein, weil ich in diesem Kreis kein Licht anwenden werde. Dann erstelle ich einen weiteren Kreis. Dies ist der Kreis, in dem ich die Beleuchtung anwenden werde. Dann erstelle ich einen Filter und lege eine ID fest, zünde mir eine an. Im Moment ist mein Filter leer und ich werde dort KI-Punktlicht anwenden. Also müssen wir dieses primitive Licht, Punktlicht, mit diffusem KI-Licht verwenden Zunächst werde ich innerhalb dieses Filter-Tags ein Grundelement für diffuses Licht erstellen SamoTiefe diffuse war Beleuchtung, und dann werde ich einige Attribute Hier gebe ich das Gleiche wie innerhalb der Doppelcodes Wie ich Ihnen bereits sagte, identifiziert diese Eingabe die Eingabe für das angegebene Filterprimitiv. Ich werde es als Quellgrafik identifizieren. Dann ist unser nächstes Attribut Ergebnis. Das Ergebnis entspricht den Doppelcodes, ich verwende Licht. Drittens müssen wir ein weiteres Attribut namens Lichtfarbe übergeben . Farbe der Beleuchtung. Die Lichtfarbe entspricht Weiß. Oder ich werde diese Datei einrichten. Dann müssen wir innerhalb dieses Primitivs ein anderes Primitiv verwenden, nämlich AE, Punktlicht-Primitiv. Ich werde dieses primitive Hämotyp-Punkt-Licht verwenden. Tut mir leid, wir brauchen dieses Schlussspiel nicht. Und dann müssen wir ein Attribut übergeben. Zuerst müssen wir XX als Wert übergeben. X entspricht 150. Dann müssen wir YX als Wert übergeben. Y entspricht 60. Dies wird die Punktlichtquelle definieren. Außerdem müssen wir Z bestehen. Er gibt Z ein, das 20 entspricht. Und jetzt müssen wir AE Composite Primitive verwenden. Dadurch wird die Originalgrafik mit dem Lichteffekt kombiniert . Lass mich dir zeigen, wie. Also hier werde ich SE Composite eingeben. Auch hier brauchen wir diesen abschließenden Zapfen nicht. Dann müssen wir einige Attribute übergeben. Also hier werde ich ein Attribut übergeben. Unser erstes Attribut ist ein Attribut. Ich bin gleich hier, ich werde die Quellgrafik übergeben. Quellgrafik ist unsere Originalgrafik, also werde ich die Quellgrafik kopieren. Dann müssen wir ein weiteres Attribut übergeben, das aufgerufen wird , nämlich N zwei. Das entspricht, hier müssen wir wieder die Quellgrafik übergeben, die Licht ist Dann müssen wir Operator, Operator übergeben und wir werden arithmetische Operatoren verwenden Operator entspricht Arithmetik. Und jetzt müssen wir K, K, K drei und den Wert Kour übergeben, um sicherzustellen, dass die Originalgrafiken so kombiniert werden, dass ihr ursprüngliches Aussehen erhalten bleibt und gleichzeitig der Lichteffekt angewendet wird so kombiniert werden, dass ihr ursprüngliches Aussehen erhalten bleibt und gleichzeitig der Lichteffekt angewendet Wie ich Ihnen gesagt habe, um es zu kombinieren, müssen wir vier Werte K übergeben die innerhalb der Doppelcodes Eins entsprechen Dann dupliziere ich diese Zeile, unser nächster Wert ist K zwei. Und K zwei ist gleich Null. Dann dupliziere ich es noch einmal, K drei ist ebenfalls gleich Null. Dann dupliziere ich es erneut und K vier ist gleich Null, und ich werde diese Datei unterschreiben. Jetzt werde ich diesen Filter in diesem Kreis anwenden. Dafür werden wir seinen ID-Namen verwenden. Zünde mir einen an. In der IRL verwende ich das Haste-Zeichen und füge dann den ID-Namen ein. Zünde mir einen an Wenn ich diese Datei einstelle, können Sie den Effekt sehen. So sieht ein Punktlicht aus. Erstellen Sie nun einen weiteren Lichteffekt , nämlich Fernlicht, ein Fernlicht. Hier werde ich einen Kommentar eingeben. Die Lichtquelle ist ein Fernlichtelement, und ich werde das KI-Entfernungslicht erstellen. Ich werde diesen Abschnitt kopieren und hier einfügen. Zuerst werde ich diesen Namen ersetzen. Ein Punkt zu einem Entfernungslicht. Dann müssen wir nur diese Privatsphäre ersetzen. Ein Punktlicht mit Entfernungslicht, und als Nächstes müssen wir einige Attribute verwenden Unser erster Attributname ist das erste Attribut, das ich verwenden werde, ist AzeMat, Sumotyp az I AUT H. AzeMat entspricht den Doppelcodes Ich werde 214 bestehen. Nun, was ist die Verwendung dieses Attributs? Es gibt den Richtungswinkel der Lichtquelle in der XXSPline Im Grunde spezifizierte es den Richtungswinkel des Lichts. Als Nächstes müssen Sie ein weiteres Attribut übergeben, nämlich die Höhe. Die Höhe entspricht 20. Im Grunde spezifizierte es den Winkel der Lichtquelle über der XY-Ebene. Außerdem müssen wir den Filter wechseln. Ich werde Licht M eins durch Licht M zwei ersetzen. Dann werde ich diesen Filter in diesem Kreis anwenden. Bevor ich diese Datei einstelle, lassen Sie uns diese Seite verkleinern. Dann werde ich diese Datei einrichten. Nachdem ich diese Datei eingerichtet habe, überschneidet sich Ops miteinander. Wir müssen die Position ändern. Hier mache ich 28280 Pixel und stelle diese Datei Außerdem müssen wir diesen Kreis verschieben. Auch hier übergebe ich den CX-Wert auf 80 Pixel. Nachdem Sie diese Datei eingestellt haben, können Sie das Ergebnis sehen. Sie können sehen, dass es so ist. Lassen Sie uns nun den Lust-Lichteffekt erzeugen , der ein Scheinwerferlicht ist. Wir erzeugen bereits Punktlicht Fernlicht, und jetzt werden wir KI-Spotlight erzeugen. Auch hier kopiere ich diesen Abschnitt und füge ihn hier ein. Zuerst werde ich die Position dieses Textes ändern. Hier werde ich es auf 390 erhöhen. Dann werde ich auch den Kreis in XX-Richtung um 390 Pixel bewegen . Dann werde ich die ID dieses Filters ersetzen. Ich werde Licht M zwei durch Licht M drei ersetzen. Außerdem werde ich es hier ersetzen. Dann ersetze ich den Text FI-Entfernungslicht durch FI-Spotlight. Als Nächstes setze ich den DFE-Filter für diffuses Licht Ich möchte dieses Primitiv entfernen Ich brauche dieses Primitiv jetzt nicht. Diesmal müssen wir ein anderes Primitiv namens F Spotlight verwenden . Dann müssen wir innerhalb dieses Primitivs einige Attribute übergeben. Zuerst müssen wir das Attribut XX, das Attribut YX und das Zadix-Attribut übergeben . XX ist gleich drei, 60. Dann müssen wir YX bestehen. Yx entspricht hier fünf, und für Xerxes, gleich, werde ich 30 bestehen Und dann übergebe ich ein weiteres Attribut namens Grenzkegelwinkel, Grenz-Ko-Winkel ist gleich und ich werde 20 Grad überschreiten Im Grunde ist damit der Kegelwinkel definiert , der die Streuung des Scheinwerfers begrenzt. Als Nächstes müssen wir drei weitere Attribute übergeben, wobei der Punkt bei x gleich 390 ist. Dann müssen wir die Linie duplizieren, indem wir auf Y zeigen. Punkt bei Y entspricht 80. Als Nächstes übergebe ich Punkt bei Z. Auch hier dupliziere ich diese Linie und ersetze X durch Y mit Z. Wir müssen sie groß machen sonst funktioniert sie nicht, also übergebe ich später den Großbuchstaben also übergebe ich später den Großbuchstaben und stelle z gleich Null Im Grunde geben diese drei Werte den Zielpunkt an, an dem das Scheinwerferlicht erkannt wird. Wenn ich diese Datei eingestellt habe, siehst du hier das Ergebnis. Das ist es, was es nach der Verwendung dieses Scheinwerfers erzeugt. Unser erster Kreis erscheint ohne Lichteffekt. Unser zweiter Kreis diffuser Lichteffekt mit Punktlicht und dreidimensionaler Beleuchtung Punktlicht und . In unserem dritten Kreis verwenden wir Streulicht, und es sorgt für ein verwenden wir Streulicht, und es sorgt einheitliches dreidimensionales Aussehen. In unserem vierten Kreis verwenden wir Spotlicht und es fokussiert und sorgt für einen dreidimensionalen Fokus es fokussiert und sorgt für einen dreidimensionalen mit einem dramatischeren Lichteffekt Um andere Lichteffekte zu nutzen, verwenden wir KI-Primitiv für diffuses Das ist es für dieses Tutorial. Danke, dass du dir dieses Video angesehen hast, Sytune für das nächste Tutorial 42. SVG feVersetzungKarten-Filter: Hallo, Leute. Schön , dich wieder zu sehen. Ich bin wieder mit einem neuen Tutorial über ein Vigi-Primitiv Und in diesem Tutorial lernen wir ein neues Primitiv kennen, die AI-Displacement-Map Es ist das beliebteste und nützlichste Privativ in Swig-Filtern in Swig-Filtern Dieser Filter in SVG wird verwendet, um mithilfe der Pixelwerte aus einem Verschiebungsmap-Bild einen Verschiebungseffekt auf einem Bild zu erzeugen mithilfe der Pixelwerte aus einem Verschiebungsmap-Bild einen Verschiebungseffekt auf einem Dieser Effekt kann ein Bild auf verschiedene Weise verzerren, z. B. durch die Erzeugung von Welleneffekten oder Verschiebung von Bildteilen auf der Grundlage des Pixelwerts eines anderen Bilds Und wenn ich über die Syntax spreche, sieht es so aus. Zuerst müssen wir A Displacement Map eingeben und dann müssen wir dieses Attribut in verwenden. Hier müssen wir das Quell-Duping bereitstellen. Dann haben wir ein weiteres Attribut in zwei Teilen, und hier müssen wir das Bild der Verschiebungskarte übergeben Dann haben wir den Maßstab, und hier müssen wir den Skalenwert übergeben. Dann haben wir den X-Kanalwähler und das Y-Kanalauswahl-Attribut Wie ich Ihnen bereits sagte, sind insgesamt zwei Eingaben erforderlich , um ein Ergebnis zu erzielen Das Bild, das enthalten ist, um die Angabe NA in ein Attribut zu verschieben , und in unserem In-Attribut haben wir definiert, welchen Verschiebungseffekt wir anwenden werden Und in unserem Skalenattribut definieren wir das Ausmaß der Verschiebung Höhere Werte führen zu einem ausgeprägteren Effekt, und dieses Attribut wird für die Verschiebung von XXs verwendet Hier können wir einen der Werte verwenden. Wir können den R-Wert, den Rotwert, den Grünwert verwenden , andernfalls den Blauwert. Wir können auch den Alpha-Wert verwenden. Auf die gleiche Weise haben wir die YXS-Verschiebung, und um das Konzept klarer zu machen, beginnen wir mit der Praxis Wie Sie also nebeneinander sehen können, öffne ich meinen Visual Studio-Code-Editor und meinen Browser mit der Servererweiterung und erstelle bereits ein Kostenvoranschlagsdokument Im Moment ist unser Dokument komplett leer. Also in unserem Bodytag nehme ich zuerst einen Igitad und einen Dann schließe ich dieses Etikett. Zuerst müssen wir SVG mit Höhe und Vevox-Bereich definieren Also um mit einem Wert von 200 zu tippen. Außerdem werde ich eine Körpergröße annehmen, die ebenfalls 200 entspricht. Dann nehme ich ein anderes Attribut, nämlich View Boox View funktioniert innerhalb der Doppelcodes gleich. Zuerst müssen wir angeben, dass Z x Null ist, YX Null ist, dann müssen wir die Fläche angeben. Ich möchte 220 bis 220 überschreiten. Dann werde ich in diesem SVG-Tag zuerst einen Kreis erstellen. Um diesen Kreis zu erstellen, müssen wir, wie Sie wissen, einige Attribute angeben, und unser erstes Attribut ist CX, Cx entspricht innerhalb der Doppelcodes Hundert. Unser nächster Wert ist CY, CY entspricht Hundert. Im Inneren des Doppelmantels hundert. Dann, und dann gebe ich diesem Kreis eine Strichfarbe, einem Strichstrich entspricht, und ich möchte grüne Farbe verwenden. Und ich habe diese Datei automatisch eingerichtet. Nachdem ich diese Datei eingestellt habe, haben wir, wie Sie sehen können , keinen Kreis in meinem Browser, weil wir vergessen haben , den Radius anzugeben Der Hämatyp entspricht also, wie er sagte, der Dole-Code hundert. Und ich werde diese Datei einrichten. Nachdem Sie diese Datei eingerichtet haben, können Sie hier das Ergebnis sehen. Wie Sie wissen, füllt SVG unser Element standardmäßig mit schwarzer Farbe. Und jetzt ist es Zeit, den Filter zu erstellen. Also hier werde ich Filter-Tag eingeben. Ich werde diesem Filter eine ID zuweisen, die ID entspricht, und unser ID-Name ist disppendFlter Und jetzt möchte ich diesen Filter in meinem Kreis anwenden. Um es anzuwenden, müssen wir, wie Sie wissen, das Style-Tag verwenden. Stil entspricht Ich werde die Filtereigenschaft verwenden. Also die Puppenmäntel, mit Hemotype gefiltert. Filter Doppelpunkt, URL. Dann müssen wir im Dual-Code die ID dieses Filters, das HAS-Tag und unseren Filternamen Displacement Filter übergeben . Wenn ich diese Datei einstelle, wird unser Kreis verschwinden. Nachdem Sie diese Datei eingestellt haben, verschwindet, wie Sie sehen können, unser Kreis. Dann werde ich in diesem Filter-Tag das Primitiv erstellen. Und unser primitiver Name ist AI Displacement MX. Ich werde für diesen Tag werben. Dann werde ich in diesem Primitiv die Attribute verwenden. Zuerst werde ich das Attribut into in zwei Schritten verwenden. Vorerst lasse ich es schwarz. Dann werde ich hier als Attribut angeben , dass ich die Quelle vergewaltigen werde. Also innerhalb der Doppelcodes werde ich Quellenvergewaltigung weitergeben. Dann müssen wir das Skalenattribut verwenden. Skala entspricht innerhalb des Doppelgängers, ich übergebe 50 Skalenwert 50. Damit müssen wir zwei weitere Attribute übergeben : den Kanalwähler und den Kanalwähler Rußtyp, Kanalwähler. X-Kanalwähler entspricht, und ich werde R-Profil verwenden Rul pass R Dann werde ich diesen Abschnitt duplizieren. Also kopiere es und füge es hier ein, und hier werde ich den Y-Kanalwähler übergeben Und dieses Mal werde ich BV bestehen. Wenn ich diese Datei einstelle, wird nichts passieren. Im Grunde ist es einfach, diesen Kreis zu erklimmen, nichts ist zu viel passiert. Wie ich Ihnen bereits sagte, können wir mit dem In-Attribut das Eingabebild angeben, und unser Eingabebild ist dieser Kreis. Aber in unserem Into-Attribut müssen wir das Bild der Verschiebungskarte übergeben. Wessen Pixelwerte werden verwendet, um das Eingabebild zu modifizieren. Also werde ich hier ein anderes Primitiv verwenden, das das Quellbild modifizieren wird. Also ein anderes Primitiv, das ich verwenden werde, nämlich Turbulenz, AE Turvulens Vor der Verschiebungs-Map werde ich FE Turvulens eingeben Außerdem müssen wir dem Primitiv ein Attribut geben. Zuerst müssen wir den Typ T deklarieren, der den Doppelcodes Turvulens LENC und nicht ANC entspricht den Doppelcodes Turvulens LENC und nicht ANC Mach dir keine Sorgen. In unserem kommenden Tutorial werden wir das Primitive der KI-Turbulenz lernen In unserem kommenden Tutorial werden wir das Primitive der KI-Turbulenz In diesem Tutorial konzentrieren wir uns nur auf die AI-Verschiebungskarte. Also das nächste Attribut, das ich übergeben werde, ist die Grundfrequenz. Die beste Frequenz entspricht innerhalb der Doppelcodes, ich werde einen bestehen. Und das nächste Attribut, das ich übergeben werde, nämlich Num Optik und Num Optik, das ist gleich Istide, den Doppelcodes, werde ich zwei übergeben Und das letzte Attribut, das wir als Turvulens übergeben müssen , ist Ergebnis gleich Turvulens und Helm, um Turvulens zu bestehen. Und jetzt müssen wir dieses Primitiv verknüpfen. Wir müssen das I-Primitiv mit der Displacement-Map verknüpfen , indem wir das Into-Attribut verwenden. Also hier werde ich Turbulenzen überwinden. Und ich werde diese Datei einrichten. Habe diese Datei eingestellt, hier kannst du das Ergebnis sehen. Dadurch wird der Utter Ap DFI-Turbulenzeffekt in der II-Verschiebungs-Map erzeugt in der II-Verschiebungs-Map Wie ich Ihnen bereits sagte, sind insgesamt zwei Eingaben erforderlich , um ein Ergebnis zu erzielen Lassen Sie mich Ihnen ein weiteres Beispiel mit echtem Bild zeigen. Wenn ich Ihnen also meine aktuelle Direktkritik zeige, gibt es einen Bildnamen mit einem Punkt JPG Also werde ich dieses Bild verwenden. Also hier werde ich das Bild verlinken. Und ich habe diesen Filter bereits angewendet. Und bevor ich diese Datei einstelle, werde ich die WIG-Imagewoche ändern. Und außerdem werde ich diesen Kreis kommentieren. Ich brauche diesen Kreis für dieses Beispiel nicht. Und dieses Mal werde ich AWG WD auf 500 Pixel und die Höhe auf 333 Pixel einstellen Außerdem müssen wir es in unserem View-Arbeitsbereich definieren. Also hier möchte ich 500 übergeben und für die Höhe werde ich 333 übergeben, und ich werde diese Datei einstellen. Nachdem Sie diese Datei eingestellt haben, funktioniert sie, wie Sie sehen können, nicht. Also werde ich zuerst den Grundfrequenzwert der A-Turbulenz ändern den Grundfrequenzwert der A-Turbulenz Ich mache 0,05 draus. Lassen Sie uns das bestätigen und sehen, ob es richtig ist oder nicht. Ja, nachdem Sie diese Datei eingerichtet haben, funktioniert sie , wie Sie sehen können Wir können das Diment mit dem Grundfrequenzwert und dem optischen Wert manipulieren . Lassen Sie mich es Ihnen zeigen Wenn ich also den optischen Wert ändere, also drei draus mache und dann diese Datei einstelle, können Sie kleine Änderungen sehen Dann werde ich den Skalenwert ändern. Wenn ich es auf 200 mache, schauen wir uns das an und stellen die Datei ein. Wie Sie sehen können, ist es das, was es zurückgibt. Also werde ich vorerst 50 draus machen. Wenn ich also einen der Kanäle ändere, nehmen wir an, den Y-Kanalwähler, verwende ich den grünen Wert G. In dieser Datei können Sie das unterschiedliche Ergebnis sehen Sie müssen also damit experimentieren , um ein anderes Ergebnis zu erhalten So können wir also die Disperspon-Map verwenden. Mithilfe der Displacement-Map können wir in unseren Elementen verschiedene Welleneffekte erzeugen in unseren Elementen verschiedene Welleneffekte Und mach dir keine Sorgen. Wir werden mit diesem Filter ein Animationsprojekt erstellen. Ich hoffe, jetzt ist Ihnen dieses Primitiv klar. Danke, dass du dir dieses Video angesehen hast. Seien Sie gespannt auf das nächste Tutorial. 43. SVG feTurbulence-Filter: Hallo Leute, schön, dass ihr wieder da seid. Ich bin wieder mit einem neuen Tutorial Thema SVG-Filter-Primitiv zurück. Und in diesem Tutorial sind wir gut darin, KI-Turbulenz-Primitive zu lernen Die von AVG gefilterten KI-Turbulenzen erzeugen Geräusche, was hilfreich ist, um verschiedene Naturphänomene wie Wolken, Feuer und Rauch zu simulieren verschiedene Naturphänomene wie Wolken, und komplexe Texturen wie Wunder oder Granit zu erzeugen Und das Rauschen kann verwendet werden, um Bild und Text zu verzerren. Purlin-Turbulenzfunktion wird verwendet, um Purlin-Rauschen zu erzeugen Die meisten der tollen VG-Filter mit dieser Privatsphäre hergestellt wurden, verwirren mich. Damit können wir Feuer, Rauch, jede komplexe Textur usw. erzeugen Rauch, jede komplexe Textur usw. Und wenn ich darüber spreche, dass es zuerst syntisch ist, Turvulens vom Typ A zu verwenden und dann Attribute zu Typattribut, bestes Frequenzattribut, Num-Oktave-Attribute , CT-Attribut Lassen Sie uns nun über dieses Attribut sprechen . Was können wir mit diesem Attribut machen? Unser erstes Attribut ist das Typattribut. Es hat zwei Werte: Ravulens, ansonsten fraktales Rauschen, und der Standardwert Dann kommt die lebhafte Frequenz. Ihre Wirkung, die Größe und die Körnung des erzeugten Geräuschs Der Standardwert ist Null, dann haben wir taube Oktaven Es definiert die Frequenz oder Details des Rauschens, und sein Standardwert ist eins Dann haben wir. Es bietet eine andere Startzahl für die Zufallsfunktion. Zu guter Letzt haben wir Stichkacheln. Es wird verwendet, um einen Stitching-Effekt zu erzeugen , wenn Sie zwei benachbarte Geräuschbereiche haben Es definiert das Verhalten beim Anhäufen von Geräuschen an den Rändern und Ecken Es umfasst also alle fünf verschiedenen Attribute. Lassen Sie uns also mit der Praxis beginnen und sehen, wie wir dieses Attribut verwenden können. Wie Sie sehen können, öffne ich Seite an Seite meinen Visual Studio-Code-Editor und meinen Browser mit der Servererweiterung, und ich habe bereits ein HTML-Dokument mit dem Indexpunkt HTML erstellt HTML-Dokument mit dem Indexpunkt HTML Wie Sie in unserem Body-Tag sehen können, haben wir ein WG-Tag, und in diesem AUG legen wir die Höhe auf 200 Pixel und 200 Dann erstellen wir im Deep-Stag einen Filter, eine Filter-ID und einen Turvulens-Filter In diesem Filter verwendet Hero dann Fitervuls verwendet Hero dann Fitervuls Wir verwenden das Typattribut, das Basis-Fgency-Attribut, das Num-Oktative-Attribut und das Set-Attribut, geben dem Attribut jedoch keinen Wert Dann haben wir ein React-Tag. Wir haben ein rechteckiges Tag. Hier sagen wir mit 200 Pixeln und einer Höhe von 200 Pixeln. Es ist ein quadratisches Feld, und wie Sie sehen können, ist es mit roter Farbe gefüllt. Zuerst werde ich diesen Filter auf dieses Rechteck anwenden . Also hier verwende ich das Filterattribut und werde diese ID kopieren. Dann gebe ich URL ein. Dann lege ich die Rundkleider fest. Wir müssen das Astec-Zeichen verwenden und wir müssen die ID weitergeben. Und wenn ich diese Datei einstelle, verdeckt sie, wie Sie sehen können, unser rechteckiges Element Dann füge ich nacheinander Attributwerte hinzu. Zuerst gebe ich Typwert, Typ an. Wie ich Ihnen bereits sagte, hat es zwei Werteturbulenzen und Fraktionslärm Tarvulens ist der Standardwert, daher würde ich mich für Fraktionsgeräusche entscheiden Dann haben wir die Grundfrequenz. Der Standardwert des Basisfrequenzattributs ist Null. Aber hier werde ich eine geringe Menge an Grundfrequenz verwenden , nämlich 0,05. Als nächstes haben wir die Zahl der Oktative. Wie ich Ihnen bereits sagte, ist der Standardwert für Num Oktave eins. Aber hier werde ich drei bestehen. Endlich haben wir C, und hier werde ich zwei bestehen. Wenn ich diese Datei einstelle, können Sie das Ergebnis sehen. Das ist es, was es erzeugt. Hier entsteht ein leicht wolkiger, lauter und rauchiger Effekt Und wenn ich die Werte etwas nass ändere, sieht man das unterschiedliche Ergebnis Nehmen wir an, ich ändere hier den Grundfrequenzwert. Ich werde 0,5 verwenden, nicht 05, und dann diese Datei einstellen, Sie können das Ergebnis der Grundfrequenz sehen. Wenn ich den Wert für die Oktivzahl Drei, Zwei, Fünf ändere Wert für die Oktivzahl Drei, Zwei, Fünf und den Wert drei festlege und diese Datei einstelle, können Sie hier kleine Änderungen erkennen Also werde ich vorerst die Grundfrequenz auf 0,05 einstellen. Und Sie können das Ergebnis sehen. Und wenn ich den voreingestellten Tight-Wert Tarvles verwende , um faktisches Rauschen durch Tarvles zu ersetzen faktisches Rauschen durch Tarvles , und dann in dieser Datei kann man Das ist es, was es erzeugt. Wie ich Ihnen bereits sagte, verwenden wir dieses Primitiv meistens zusammen mit einem anderen Primitiv, dem es sich um eine Fee-Displacement-Map handelt, und wir haben bereits in unserem vorherigen Tutorial darüber gelernt. Wenn ich also ein anderes Primitiv, die AI-Verschiebungs-Map, aufrufe und für Num Optics den Wert zwei und den CT-Wert fünf und dann diese Datei festlege Wert zwei und den CT-Wert fünf , können Sie das Ergebnis sehen. Ich werde Ihnen nicht erklären, wie wir die AI-Verschiebungs-Map verwenden können , da ich es bereits in unserem vorherigen Tutorial behandelt habe. In diesem Tutorial versuche ich mich nur auf KI-Turbulenzen zu konzentrieren So können wir dieses Primitiv verwenden. Und wenn Sie unterschiedliche Ergebnisse erzielen möchten, müssen Sie mit diesem Wert experimentieren. Ich hoffe also, dass Sie jetzt lernen , wie wir AF-Turbulenz nutzen können Vielen Dank, dass Sie sich dieses Video Seien Sie gespannt auf das nächste Tutorial