Maison > Article > interface Web > Code pour dessiner des graphiques vectoriels SVG en utilisant HTML5

Code pour dessiner des graphiques vectoriels SVG en utilisant HTML5

不言original: 2018-06-20 10:00:352685parcourir

Cet article présente principalement le didacticiel d'introduction à l'utilisation de HTML5 pour dessiner des graphiques vectoriels SVG, y compris l'introduction du dessin graphique de base et des effets de dégradé simples. Notez que l'ancienne version d'IE ne le prend pas bien en charge. Les amis qui en ont besoin peuvent s'y référer. Ci-dessous,

VG signifie Scalable Vector Graphics, qui est un langage utilisé pour décrire les graphiques 2D. Les applications graphiques sont écrites en XML, puis le XML est rendu par un programme de lecture SVG.

SVG est principalement utilisé pour les graphiques de type vectoriel, tels que les diagrammes circulaires, les graphiques bidimensionnels dans les systèmes de coordonnées X, Y, etc.

SVG est devenu une recommandation du W3C le 14 janvier 2003. Vous pouvez consulter la dernière version de la spécification SVG sur la page Spécification SVG.

Afficher les fichiers SVG
La plupart des navigateurs Web peuvent afficher les fichiers SVG tout comme ils peuvent afficher les graphiques PNG, GIF et JPG. Les utilisateurs d'IE peuvent devoir installer Adobe SVG Reader pour pouvoir afficher SVG dans le navigateur.

Intégrer SVG en HTML5
HTML5 nous permet d'intégrer du SVG directement en utilisant les balises __486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948 Ce qui suit est une syntaxe simple :

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

HTML5 - SVG Circle

Voici une version HTML5 d'un exemple SVG, utilisant la balise 30de22e41cb8eb8fbfdc1f091d85e4be pour dessiner un cercle :

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

Sur le dernières versions compatibles HTML5 Les résultats suivants seront générés dans la version FireFox :

2016219112130340.jpg (223×186)

HTML5 - Rectangle SVG
Voici un HTML5 version de l'exemple SVG, utilisez la balise < ;rect> pour dessiner un rectangle :

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

Dans la dernière version de FireFox avec HTML5 activé, les résultats suivants sont générés :

2016219112200272.jpg (316×152)

HTML5 - Ligne SVG
Voici une version HTML5 d'un exemple SVG, utilisant la balise 15a73cc5312745b1b00671f6e690e36a Vous pouvez définir des styles supplémentaires à l'aide des informations d'attribut de style, telles que le trait, la couleur de remplissage, la largeur du trait, etc.

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

Dans la dernière version de FireFox avec HTML5 activé, les résultats suivants sont générés :

2016219112220725.jpg (217×159)

HTML5 - Ellipse SVG

Ici est une version HTML5 de l'exemple SVG, utilisant la balise d9b42b40d0fdc429c7c48871eea4816c pour dessiner une ellipse :
Dans la dernière version de FireFox avec HTML5 activé, cela donne :

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

2016219112240763.jpg (225×148)

HTML5 - Polygone SVG

Voici une version HTML5 d'un exemple SVG, utilisant la balise 6f1cb7f8499a7e0f625f982868cbc44d 🎜>Avec HTML5 activé Les résultats suivants sont générés dans la dernière version de FireFox :

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

HTML5 - Polyligne SVG 2016219112258796.jpg (310×118)

Voici la version HTML5 d'un exemple SVG, utilisez la balise ce803ba1a4290bddb3ba9c6f57d4c9b4 pour dessiner un graphique linéaire :

Dans la dernière version de FireFox avec HTML5 activé, les résultats suivants seront générés :

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

HTML5 - Dégradé SVG 2016219112318049.jpg (245×114)

Ce qui suit est une version HTML5 d'un exemple SVG, utilisant la balise d9b42b40d0fdc429c7c48871eea4816c dessinez une ellipse et la balise 0649cc1cc16c8306177acf255def2211 pour définir un dégradé radial SVG.

Nous pouvons créer des dégradés linéaires SVG de la même manière en utilisant la balise bffa9ad35fc32d811cd3bf50cdea268e.
Dans la dernière version de FireFox avec HTML5 activé, les résultats suivants seront générés :

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

Ce qui précède représente l'intégralité du contenu de cet article . J'espère que cela sera utile à l'apprentissage de tout le monde. Pour obtenir de l'aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées : 2016219112338977.jpg (319×157)

Comment utiliser HTML5 Utilisez l'interface Fichier pour télécharger des fichiers sur la page Web

Comment obtenir l'effet d'animation de la rotation de l'image en html5

Canevas HTML5 Implémenter la méthode de dessin des courbes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php html5 firefox xml 接口 canvas

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un diagramme de topologie de réseau de télécommunications HTML5 CanvasArticle suivant：Comment créer un diagramme de topologie de réseau de télécommunications HTML5 Canvas

Articles Liés

Voir plus