Im nächsten Artikel erfahren wir, wie man ein SVG-Logo in HTML5 zeichnet. Bevor wir mit dem Lesen des Artikels beginnen, wollen wir ein paar Dinge über SVG besprechen. Scalable Vector Graphics (SVG) ist ein Bildformat, das Vektordaten verwendet. Im Gegensatz zu anderen Formaten verwendet SVG zur Erstellung eines Bildes keine eindeutigen Pixel, sondern Vektordaten.
Das Beste daran ist, dass Sie mit SVG Bilder erstellen können, die sich an jede Auflösung anpassen, was sie ideal für Webdesign und viele andere Anwendungen macht.
Schauen wir uns ein einfaches Beispiel an, um SVG besser zu verstehen
Die chinesische Übersetzung von<!DOCTYPE html> <html> <body> <svg width="110" height="150"> <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="green" /> </svg> </body> </html>
Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die einen auf der Webseite gezeichneten SVG-Kreis mit den im obigen Skript angegebenen Abmessungen enthält.
Vektorbilder im SVG-Format können beispielsweise ohne Qualitätsverlust skaliert werden. Im Gegensatz zu Bitmap-Bildern wie JPEG und PNG können sie auch lokalisiert werden, ohne dass ein Grafikeditor erforderlich ist.
Hier ist ein Beispiel für das Zeichnen eines SVG-Logos in HTML5
<!DOCTYPE html> <html> <body> <svg height="130" width="500"> <defs> <linearGradient id="tutorial" x1="10%" y1="5%" x2="90%" y2="10%"> <stop offset="0" style="stop-color:rgb(187, 143, 206);" /> <stop offset="1" style="stop-color:rgb(192, 57, 43);" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#tutorial)" /> <text fill="#58D68D" font-size="14" font-family="Verdana" x="50" y="86">TUTORIALSPOINT</text> </svg> </body> </html>
Die chinesische Übersetzung von
Beispiel 2
<!DOCTYPE html> <html> <body> <svg width="140px" height="320px"> <rect x="19" y="19" width="110" height="300" fill="white" stroke="black" stroke-width="3" /> <circle cx="75" cy="85" r="30" fill="red" stroke="black" stroke-width="2" /> <circle cx="75" cy="165" r="30" fill="yellow" stroke="black" stroke-width="2" /> <circle cx="75" cy="245" r="30" fill="#40CC40" stroke="black" stroke-width="2" /> </svg> <p>FOLLOW TRAFFIC SIGNALS</p> </body> </html>
Beispiel 3
<!DOCTYPE html> <html> <head> <title>HTML5 SVG logo</title> </head> <body> <svg height="170" width="400"> <defs> <linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(184,78,43);stop-opacity:1" /> <stop offset="50%" style="stop-color:rgb(241,241,241);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,141,52);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" /> <text fill="#rgb(141,218,255)" font-size="40" font-family="Verdana" x="50" y="86">logo</text> </svg> </body> </html>
Das obige ist der detaillierte Inhalt vonWie zeichne ich ein SVG-Logo in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
-Tag in HTML?
Nächster Artikel:Wie legt man in HTML fest, ob der Inhalt eines Elements übersetzt werden soll?