Chapitre 2  Formes de base

Extrait

Cercles

L'élément 'circle' demande trois attributs géométriques:  cx’, ‘cy’, et ‘r’.
Les attributs ‘cx’ et ‘cy’ donnent la position du centre du cercle tandis que ‘r’ indique le rayon du cercle. 
Si vous voulez créer un cercle avec un diamètre de 80 unités, vous devez donner à l'attribut ‘r’ la valeur de 40 comme sur cet exemple.

 
  
Figure 2-19.  Les attributs du cercle  

( voir cette image comme svg )

 <svg width="350" height="300">
 <circle cx="100" cy="50" r="40" stroke="darkslategrey" stroke-width="2" fill="grey" fill-opacity="0.4"/>
</svg>

Voici la syntaxe de l'élément ‘circle’:

<circle id="name"


        cx="coordinate"
        cy="coordinate"
        r="length"
        style-attribute="style-value"/>

 La valeur par défaut de ‘r’, 'cx' et 'cy' est 0. Si les valeurs de ‘cx’ et de  ‘cy’ ne sont pas indiquées, le centre est alors placé en (0, 0).  Toutefois une valeur pour 'r' est requise pour que le cercle soit dessiné en SVG. Sur cet exemple le premier cercle n'est pas dessiné. 

Figure 2-20.  Exemples de cercles  

( voir cette image comme svg )

 <svg width="350" height="300">
   
<!-- Points -->
   <circle r="0"
fill="black" stroke="black"/>
    <circle cx="10" cy="10" r="3" fill="black" stroke="black"/>
   <circle cx="30" cy="10" r="5" fill="black" stroke="red" stroke-width="2"/>
   <circle cx="50" cy="10" r="7" fill="black" stroke="red" stroke-width="2"/>
   <!-- Cercles -->
    <circle cx="0" cy="50" r="20" fill="orange" stroke="black" stroke-width="3" />
    <circle cx="70" cy="50" r="30" fill="grey" stroke="black" stroke-width="3" />
 
  <circle cx="120" cy="50" r="40" fill="grey" fill-opacity="0.5" stroke="black" stroke-width="3"/>
 
  <circle cx="200" cy="50" r="50" fill="grey" fill-opacity="0.3" stroke="black" stroke-width="3"/>
</svg>


L'élément ‘circle’ peut être utilisé comme forme de base pour des boutons, des roues, des bulles et bien d'autres choses encore comme nous le verrons dans ce livre.

Exemples de cercles

Voici quelques figures réalisées avec un ou deux cercles et en jouant sur les attributs de présentation.


Figure 2-21. 
Formes étonnantes avec un ou deux cercles

( voir cette image comme svg

Voyez le code!

 <svg width="800" height="600" viewBox="0 0 400 300">
  <defs>
    <pattern id="gridPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.25"/>
    </pattern>
  </defs>
  <rect id="grid" width="350" height="211" stroke="gray" stroke-width="0.1" fill="url(#gridPattern)" />
<!-- grid -->
 
<circle cx="40" cy="40" r="20" stroke="darkslategray" stroke-width="20"
                                                 stroke-opacity="0.5" fill="lightslategray" fill-opacity="0.5" />
 
<circle cx="120" cy="40" r="20" stroke="darkslategray" stroke-width="10"
                                       
          stroke-dasharray="1.75 8.72" fill="lightslategray" fill-opacity="0.5" />
 
<circle cx="40" cy="100" r="10" stroke="darkslategray" stroke-width="20"
                                       
          stroke-dasharray="15.708 15.708" stroke-dashoffset="7.854"
                                                  fill="lightslategray" fill-opacity="0.5"/>
 
<circle cx="120" cy="100" r="10" stroke="darkslategray" stroke-width="20"
                                                
stroke-dasharray="47.124 15.708" stroke-dashoffset="7.854"
      
                                                 fill="lightslategray" fill-opacity="0.5"/>
 
<circle cx="40" cy="160" r="20" stroke="darkslategray" stroke-width="2"
                                      stroke-dasharray="31.416 31.416" stroke-dashoffset="-15.708"
fill="none" />     
 
<circle cx="120" cy="160" r="20" stroke="darkslategray" stroke-width="8"
                                                     stroke-dasharray="62.832 100" stroke-dashoffset="-41.888"
                                           
          fill="none" stroke-linecap="round" />
 
<text x="75" y="200" font-size="8" text-anchor="middle">single circle  each</text>
  <circle cx="230" cy="40" r="20" stroke="darkslategray" stroke-width="20" 
  
                                                           stroke-opacity="0.5" fill="lightslategray" fill-opacity="0.5" />
 
<circle cx="230" cy="40" r="15" stroke="darkslategray" stroke-width="20"
          stroke-opacity="0.5" fill="lightslategray" fill-opacity="0.5" />
 
<circle cx="310" cy="40" r="20" stroke="darkslategray" stroke-width="10"
                                                    stroke-dasharray="1.75 8.72" fill="lightslategray" fill-opacity="0.5" />
  <circle cx="310" cy="40" r="10" stroke="darkslategray" stroke-width="20"
                                                  stroke-dasharray="0.875 14.833 0.875 100" fill="none" />
 
<circle cx="230" cy="100" r="20" stroke="darkslategray" stroke-width="2" fill="none" />
 
<circle cx="230" cy="100" r="10" stroke="darkslategray" stroke-width="20"
                                           
          stroke-dasharray="0.524 2.094" fill="none" />
 
<circle cx="310" cy="100" r="10" stroke="darkslategray" stroke-width="20" 
                                         
stroke-dasharray="15.708 15.708" stroke-dashoffset="7.854" fill="none" />
 <circle cx="310" cy="100" r="10" stroke="lightslategray" stroke-width="20" 
                                 stroke-dasharray="15.708 15.708" stroke-dashoffset="-7.854" fill="none" />
 <circle cx="230" cy="160" r="10" stroke="darkslategray" stroke-width="20"
                                                  stroke-dasharray="15.708 15.708" stroke-dashoffset="7.854"
                                                  stroke-opacity="0.5" fill="lightslategray" />
  <circle cx="230" cy="160" r="10" stroke="lightslategray" stroke-width="20"
                                                    
stroke-dasharray="15.708 15.708" stroke-dashoffset="-7.854"
                                                      stroke-opacity="0.5" fill="none" />
 
<circle cx="310" cy="160" r="20" stroke="darkslategray" stroke-width="8"
                                                      stroke-dasharray="6.981 13.962" stroke-dashoffset="3.491"
                                                      fill="none" stroke-linecap="round" />
 <circle cx="310" cy="160" r="10" stroke="lightslategray" stroke-width="20"
                                              stroke-dasharray="3.491 6.981" stroke-dashoffset="-3.491" fill="none" />
 
<text x="275" y="200" font-size="8" text-anchor="middle">two concentric circles each</text>
</svg>