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>