Heim > Artikel > Web-Frontend > Code zum Zeichnen von SVG-Vektorgrafiken mit HTML5

Code zum Zeichnen von SVG-Vektorgrafiken mit HTML5

不言Original: 2018-06-20 10:00:352670Durchsuche

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 __486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948-Tags einzubetten. Das Folgende ist eine einfache Syntax:

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

HTML5 – SVG-Kreis

Hier ist eine HTML5-Version eines SVG-Beispiels, das einen Kreis mit dem 30de22e41cb8eb8fbfdc1f091d85e4be-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>

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 4f5c91326734be5b874f0369b6cec59d-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>

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 15a73cc5312745b1b00671f6e690e36a-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>

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 d9b42b40d0fdc429c7c48871eea4816c 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>

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 6f1cb7f8499a7e0f625f982868cbc44d-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>

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 ce803ba1a4290bddb3ba9c6f57d4c9b4 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>

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 d9b42b40d0fdc429c7c48871eea4816c-Tag zum Zeichnen einer Ellipse und das 0649cc1cc16c8306177acf255def2211-Tag verwendet um einen SVG-Radialverlauf zu definieren.

Mit dem Tag bffa9ad35fc32d811cd3bf50cdea268e 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>

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!

php html5 firefox xml 接口 canvas

Stellungnahme：

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

Vorheriger Artikel：So erstellen Sie ein HTML5 Canvas-Telekommunikationsnetzwerk-TopologiediagrammNächster Artikel：So erstellen Sie ein HTML5 Canvas-Telekommunikationsnetzwerk-Topologiediagramm

In Verbindung stehende Artikel

Mehr sehen