oujood.com

SVG  comment dessiner un cercle et un ellipse

Dans ce cours nous allez apprendre comment SVG permet de tracer un Cercle à l’aide de l’élément  <circle>.

chercher |

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 :

Sélectionner 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

Sélectionner 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 :

Sélectionner 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 :

Sélectionner 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 :

Sélectionner 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

Sélectionner 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>

 
Par carabde 20 Avril 2014

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web