Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Ein Einführungs-Tutorial zum Zeichnen von SVG-Vektorgrafiken mit HTML5_html5-Tutorial-Tipps

Ein Einführungs-Tutorial zum Zeichnen von SVG-Vektorgrafiken mit HTML5_html5-Tutorial-Tipps

WBOY
Freigeben： 2016-05-16 15:45:59
Original
2335 Leute haben es durchsucht

VG steht für Scalable Vector Graphics, eine Sprache zur Beschreibung von 2D-Grafiken. Grafikanwendungen werden mit XML geschrieben, das dann von einem SVG-Reader-Programm gerendert wird.

SVG wird hauptsächlich für Vektordiagramme wie Kreisdiagramme, zweidimensionale Diagramme in X-, Y-Koordinatensystemen usw. verwendet.

SVG wurde am 14. Januar 2003 zu einer W3C-Empfehlung. Sie können die neueste Version der SVG-Spezifikation auf der Seite SVG-Spezifikation anzeigen.

SVG-Dateien anzeigen
Die meisten Webbrowser können SVG anzeigen, genau wie sie PNG-, GIF- und JPG-Grafiken anzeigen können. IE-Benutzer müssen möglicherweise Adobe SVG Reader installieren, um SVG im Browser anzeigen zu können.

SVG in HTML5 einbetten
HTML5 ermöglicht es uns, SVG direkt mit dem __...-Tag einzubetten. Das Folgende ist eine einfache Syntax:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <svg xmlns="http://www .w3.org/2000/svg"> 
  2. ... 
  3. svg>

HTML5 – SVG-Kreis
Hier ist eine HTML5-Version eines SVG-Beispiels, bei dem das -Tag verwendet wird:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <Kopf>  
  3. <Titel>SVGTitel>  
  4. <meta charset="utf- 8" />  
  5. Kopf>  
  6. <Körper>  
  7. <h2>HTML5 SVG-Kreis h2>  
  8. <svg id="svgelem"  Höhe="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <circle id="redcircle"  cx="50" cy="50" r="50" füllen ="rot" />  
  10. svg>  
  11. Körper>  
  12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果:
2016219112130340.jpg (223×186)


HTML5 - SVG 矩形
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个矩形:

XML/HTML-Code复制内容到剪贴板
  1. >  
  2. <Kopf>  
  3. <Titel>SVGTitel>  
  4. <meta charset="utf- 8" />  
  5. Kopf>  
  6. <Körper>  
  7. <h2>HTML5 SVG Rechteck h2>  
  8. <svg id="svgelem"  Höhe="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <rect id="redrect"  Breite="300" Höhe="100" füllen="rot" / >  
  10. svg>  
  11. Körper>  
  12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果:
2016219112200272.jpg (316×152)


HTML5 - SVG 线条
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个线条:

XML/HTML-Code复制内容到剪贴板
  1. >  
  2. <Kopf>  
  3. <Titel>SVGTitel>  
  4. <meta charset="utf- 8" />  
  5. Kopf>  
  6. <Körper>  
  7. <h2>HTML5 SVG Line h2>  
  8. <svg id="svgelem"  Höhe="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <Linie x1="0"  y1="0" x2="200" y2="100"  
  10.           Stil="strichpunkt:rot;strichbreite:2"/>  
  11. svg>  
  12. Körper>  
  13. html>  

你可以使用 style 属性给它设置额外的样式信息,比如笔画,填充色,笔画宽度等等.

在启用 HTML5 的最新版 FireFox 中会生成如下结果:
2016219112220725.jpg (217×159)


HTML5 - SVG 椭圆
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个椭圆:

XML/HTML-Code复制内容到剪贴板
  1. >  
  2. <Kopf>  
  3. <Titel>SVGTitel>  
  4. <meta charset="utf- 8" />  
  5. Kopf>  
  6. <Körper>  
  7. <h2>HTML5 SVG Ellipse h2>  
  8. <svg id="svgelem"  Höhe="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <Ellipse cx="100"  cy="50" rx="100" ry="50" fill ="rot" />  
  10. svg>  
  11. Körper>  
  12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果:
2016219112240763.jpg (225×148)


HTML5 - SVG 多边形
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个多边形:

XML/HTML-Code复制内容到剪贴板
  1. >  
  2. <Kopf>  
  3. <Titel>SVGTitel>  
  4. <meta charset="utf- 8" />  
  5. Kopf>  
  6. <Körper>  
  7. <h2>HTML5 SVG Polygon h2>  
  8. <svg id="svgelem"  Höhe="200" xmlns="http://www.w3.org/2000/svg">  
  9.     <Polygon  Punkte="20, 10 300,20, 170,50" füllen="rot"  />  
  10. svg>  
  11. Körper>  
  12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果:
2016219112258796.jpg (310×118)


HTML5 - SVG-Datei
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个折线图:

XML/HTML-Code复制内容到剪贴板
  1. >  
  2. <Kopf>  
  3. <Titel>SVGTitel>  
  4. <meta charset="utf- 8" />  
  5. Kopf>  
  6. <Körper>  
  7. <h2>HTML5 SVG Polylinie h2>  
  8. <svg id="svgelem"  Höhe="200" xmlns="http://www.w3.org/2000/svg">  
  9.  <Polylinie Punkte="0, 0 0,20 20,20 20,40 40,40 40,60" füllen="rot" />  
  10. svg>  
  11. Körper>  
  12. html>  

在启用 HTML5 的最新版 FireFox 中会生成如下结果:
2016219112318049.jpg (245×114)


HTML5 - SVG-Datei
下面是一个 SVG 示例的 HTML5 版本，用 标签绘制一个椭圆, 使用 标签定义一个 SVG 径向渐变.

我们可以以类似的方式用 标签创建 SVG 线性渐变.

XML/HTML-Code复制内容到剪贴板
  1. >  
  2. <Kopf>  
  3. <Titel>SVGTitel>  
  4. <meta charset="utf- 8" />  
  5. Kopf>  
  6. <Körper>  
  7. <h2>HTML5 SVG Verlaufsellipseh2>  
  8. <svg id="svgelem"  Höhe="200" xmlns="http://www.w3.org/2000/svg">  
  9.    <defs>  
  10.       <radialGradient id="gradient"  cx="50%" cy= "50%" r="50%"  
  11.       fx="50%" fy= "50 %">  
  12.       <Stopp Offset="0% " Stil="stop-color:rgb(200,200,200);   
  13.       stop-opacity:0"/>  
  14.       <Stopp Offset="100 % " style="stop-color:rgb(0,0,255);   
  15.       stop-opacity:1"/>  
  16.       radialGradient>  
  17.    defs>  
  18.  <Ellipse cx="100" cy="50" rx="100" ry="50"
  19.  Stil="fill:url(#gradient)" />
  20. svg>
  21. Körper>
  22. html>

In der neuesten Version von Firefox mit aktiviertem HTML5 ergibt sich Folgendes:
2016219112338977.jpg (319×157)

Verwandte Etiketten：
html5 svg 矢量图
Quelle：php.cn
Vorheriger Artikel：Zusammenfassung der Möglichkeiten zum Erzielen von Animationseffekten in HTML5 _HTML5-Tutorial-Fähigkeiten Nächster Artikel：Änderung der Tutorialfähigkeiten im HTML5-Audio-Tag-Stil _html5
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage