Code zum Zeichnen von SVG-Vektorgrafiken mit HTML5-H5-Tutorial-php.cn

Code zum Zeichnen von SVG-Vektorgrafiken mit HTML5

不言

Freigeben： 2018-06-20 10:00:35

Original

2683 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Einführungs-Tutorial für die Verwendung von HTML5 zum Zeichnen von SVG-Vektorgrafiken vorgestellt, einschließlich der Einführung in das grundlegende Grafikzeichnen und einfache Verlaufseffekte. Beachten Sie, dass die alte Version von IE dies nicht gut unterstützt Im Folgenden steht

VG für Scalable Vector Graphics, eine Sprache zur Beschreibung von 2D-Grafiken, die mithilfe von XML geschrieben und anschließend von einem SVG-Reader-Programm gerendert werden.

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 genauso anzeigen wie PNG-, GIF- und JPG-Grafiken. IE-Benutzer müssen möglicherweise den Adobe SVG Reader installieren, um SVG im Browser anzeigen zu können.

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

<svg xmlns="http://www.w3.org/2000/svg">
...       
</svg>

Nach dem Login kopieren

HTML5 – SVG-Kreis

Hier ist eine HTML5-Version eines SVG-Beispiels, das einen Kreis mit dem -Tag zeichnet:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>

Nach dem Login kopieren

Funktioniert in der neuesten Version von Firefox mit aktiviertem HTML5 erzeugt das folgende Ergebnis:

2016219112130340.jpg (223×186)

HTML5 - SVG-Rechteck
Hier ist eine HTML5-Version eines SVG-Beispiels, Die Verwendung des -Tags. Das Zeichnen eines Rechtecks:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="redrect" width="300" height="100" fill="red" />
</svg>
</body>
</html>

Nach dem Login kopieren

erzeugt in der neuesten Version von Firefox mit aktiviertem HTML5 Folgendes:

2016219112200272.jpg (316×152)

HTML5 – SVG-Linien
Das Folgende ist eine HTML5-Version eines SVG-Beispiels, bei dem das -Tag zum Zeichnen einer Linie verwendet wird:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="200" y2="100"
          style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>

Nach dem Login kopieren

Sie können das Stilattribut zum Festlegen verwenden zusätzliche Stilinformationen dafür, wie etwa Strich, Füllfarbe, Strichstärke usw.

In der neuesten Version von Firefox mit aktiviertem HTML5 werden die folgenden Ergebnisse generiert:
2016219112220725.jpg (217×159)

HTML5 - SVG Ellipse
Hier ist eine HTML5-Version des SVG-Beispiels, die das Tag zum Zeichnen einer Ellipse verwendet:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>

Nach dem Login kopieren

In der neuesten Version von Firefox mit aktiviertem HTML5 ergibt sich Folgendes:

2016219112240763.jpg (225×148)

HTML5 – SVG-Polygon
Hier ist eine HTML5-Version eines SVG-Beispiels, bei dem das -Tag zum Zeichnen eines Polygons verwendet wird:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon  points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html>

Nach dem Login kopieren

In der neuesten Version von Firefox mit aktiviertem HTML5 werden die folgenden Ergebnisse generiert:

2016219112258796.jpg (310×118)

HTML5 - SVG-Polylinie
Das Folgende ist Eine HTML5-Version des SVG-Beispiels zeichnet mit dem Tag ein Liniendiagramm:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polyline</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
 <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
</svg>
</body>
</html>

Nach dem Login kopieren

generiert die folgenden Ergebnisse in der neuesten Version von Firefox mit aktiviertem HTML5:

2016219112318049.jpg (245×114)

HTML5 – SVG-Verlauf
Das Folgende ist eine HTML5-Version eines SVG-Beispiels, das das -Tag zum Zeichnen einer Ellipse und das -Tag verwendet um einen SVG-Radialverlauf zu definieren.

Mit dem Tag können wir auf ähnliche Weise lineare SVG-Verläufe erstellen.

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
   <defs>
      <radialGradient id="gradient" cx="50%" cy="50%" r="50%"
      fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(200,200,200);   
      stop-opacity:0"/>
      <stop offset="100%" style="stop-color:rgb(0,0,255);   
      stop-opacity:1"/>
      </radialGradient>
   </defs>
   <ellipse cx="100" cy="50" rx="100" ry="50"
      style="fill:url(#gradient)" />
</svg>
</body>
</html>

Nach dem Login kopieren

In der neuesten Version von Firefox mit aktiviertem HTML5 werden die folgenden Ergebnisse generiert:

2016219112338977.jpg (319×157)

Das Obige ist der gesamte Inhalt dieses Artikels, I Ich hoffe, es wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie HTML5 Verwenden Sie die Dateischnittstelle, um Dateien auf der Webseite herunterzuladen

So erzielen Sie den Animationseffekt der Bilddrehung in HTML5

Canvas von HTML5 Implementieren Sie die Methode zum Zeichnen von Kurven

Das obige ist der detaillierte Inhalt vonCode zum Zeichnen von SVG-Vektorgrafiken mit HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!