logo oujood
🔍

SVG  comment dessiner un cercle et un ellipse

SVG  comment dessiner un cercle avec la balise <circle>


HTML5 cours tutorial SVG

En SVG un Cercle  est dessiné à l’aide de l’élément  <circle> .
Voici le code SVG :

Exemple :     📋 Copier le code 


  <!DOCTYPE html>
 <html>
 <head>
 <title> Dessiner un rectangle avec SVG</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 400" 
  xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx = "100" cy = "100" r = "80" fill = "orange" stroke = "navy" stroke-width = "10"/>
 </svg>
  </div>
 </body>
 </html>

Explication de code :
Les attributs cx et cy définissent les coordonnées x et y du centre du cercle. Si cx et cy sont omis, le centre du cercle sera définie à (0, 0)
L'attribut r définit le rayon du cercle.
Pour le reste des attributs c’est la même chose que pour le rectangle.
Exemple 2

Exemple :     📋 Copier le code 


  <!DOCTYPE html>
 <html>
 <head>
 <title> Dessiner un rectangle avec SVG</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 400">
 <circle cx = "100" cy = "100" r = "80" fill = "none" stroke =
  "#00f" stroke-width = "10"/>
 <circle cx = "280" cy = "100" r = "80" fill = "none" stroke =
  "#000" stroke-width = "10"/>
 <circle cx = "460" cy = "100" r = "80" fill = "none" stroke =
  "#f00" stroke-width = "10"/>
 <circle cx = "200" cy = "180" r = "80" fill = "none" stroke =
  "yellow" stroke-width = "10"/>
 <circle cx = "380" cy = "180" r = "80" fill = "none" stroke =
  "green" stroke-width = "10"/>
 </svg>
  </div>
 </body>
 </html>

SVG comment dessiner un ellipse avec la balise <ellipse>

L'élément 'ellipse' définit une ellipse qui est aligné sur l'axe avec l' actuel système de coordonnées utilisateur basé sur un point central et deux rayons.

Exemple 1 L'élément <ellipse> est utilisé pour créer une ellipse.

Une ellipse est étroitement liée à un cercle. La différence est qu'une ellipse a un rayon x et un rayon y qui diffère l’un de l'autre, alors qu'un cercle a un rayon x et un rayon y qui sont égaux:
Voici le code SVG :

Exemple :     📋 Copier le code 


  <!DOCTYPE html>
 <html>
 <head>
 <title> Dessiner un rectangle avec SVG</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 400" 
  xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="300" cy="80" rx="100" ry="50" 
  style="fill:yellow;stroke:purple;stroke-width:2"/>
 </svg>
  </div>
 </body>
 </html>

Explication de code :
L'attribut cx définit le coordonnée x du centre de l'ellipse
L'attribut cy définit le coordonnée y du centre de l'ellipse
L'attribut rx définit le rayon horizontal
L'attribut ry définit le rayon vertical

Exemple 2 L'exemple suivant crée trois ellipses superposées :

Voici le code SVG :

Exemple :     📋 Copier le code 


  <!DOCTYPE html>
 <html>
 <head>
 <title> Dessiner un rectangle avec SVG</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 400">
   <ellipse cx="240" cy="70" rx="220" ry="30"
  style="fill:purple"/>
   <ellipse cx="240" cy="80" rx="190" ry="20"
  style="fill:lime"/>
   <ellipse cx="240" cy="90" rx="170" ry="15"
  style="fill:yellow"/>
 </svg>
  </div>
 </body>
 </html>

Exemple 3 L'exemple suivant combine deux ellipses (un jaune et un blanc) :

Voici le code SVG :

Exemple :     📋 Copier le code 


  <!DOCTYPE html>
 <html>
 <head>
 <title> Dessiner un rectangle avec SVG</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 400">
      <ellipse cx="220" cy="50" rx="220" ry="50"
  style="fill:yellow"/>
      <ellipse cx="220" cy="50" rx="190" ry="20"
  style="fill:red"/>
 </svg>
  </div>
 </body>
 </html>

Exemple 4

Exemple :     📋 Copier le code 


  <!DOCTYPE html>
 <html>
 <head>
 <title> Dessiner un rectangle avec SVG</title>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 400">
       <ellipse transform="translate(400 200) rotate(-30)"
     rx="250" ry="100"
     fill="none" stroke="blue" stroke-width="20"  />
 </svg>
  </div>
 </body>
 </html>

chapitre précédent

sommaire

chapitre suivant

Par carabde 20 Avril 2014