Code pour dessiner des graphiques vectoriels SVG en utilisant HTML5-Tutoriel H5-php.cn

Code pour dessiner des graphiques vectoriels SVG en utilisant HTML5

不言

Libérer： 2018-06-20 10:00:35

original

2704 Les gens l'ont consulté

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 __ Ce qui suit est une syntaxe simple :

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

Copier après la connexion

<🎜. >

HTML5 - SVG Circle

Voici une version HTML5 d'un exemple SVG, utilisant la balise 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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

2016219112240763.jpg (225×148)

HTML5 - Polygone SVG

Voici une version HTML5 d'un exemple SVG, utilisant la balise 🎜>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>

Copier après la connexion

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

Voici la version HTML5 d'un exemple SVG, utilisez la balise 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>

Copier après la connexion

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

Ce qui suit est une version HTML5 d'un exemple SVG, utilisant la balise dessinez une ellipse et la balise 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 .
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>

Copier après la connexion

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)