SVG

Cercle et translation

Ligne de disques

Écrire un code reproduisant la figure suivante.

Cette figure est constituée de 32 disques.

Vous respecterez les contraintes suivantes :

  • Un seul cercle doit être défini dans le code.
  • Vous utiliserez au plus 5 balises use qui présenteront des attributs transform="translate(..., ...)".

Il faudra donc faire des regroupements à l'aide de la balise g de façon à minimiser le nombre de balises use utilisées.

  • Une aide
  • id et g
  • un code possible

L'idée utilisée est la même que pour réduire le nombre de multiplications pour calculer \(x^{16}\).

Pour calculer \(x^{16} = x\times x\times x\times x\times x\times x\times x\times x\times x\times x\times x\times x\times x\times x\times x\times x \), il faut a priori 15 multiplications.

Mais si nous commençons par calculer \( y = x^2 = x\times x \) (une multiplication), nous pouvons ensuite écrire \( x^{16} = y \times y \times y \times y \times y \times y \times y \times y \) (7 multiplications). Soit un total de 8 multiplications au lieu de 15.

Et, bien sûr, nous pouvons poursuivre l'idée. On calcule \( y = x\times x \) (une multiplication) puis \( z = x^4 = y \times y \) (une multiplication) puis \( x^{16} = z \times z \times z \times z \) (trois multiplications), soit un total de 5 multiplications.

Ou encore \( y = x\times x \) puis \( z = x^4 = y \times y \) puis \( w = x^8 = z \times z \) et enfin \( x^{16} = w \times w \), soit un total de 4 multiplications.

Un groupe d'objets svg peut être identifié comme un seul objet. En d'autres termes, on peut ajouter un attribut id à une balise g.

On définit le premier cercle et on utilise une première balise use pour le second cercle de la même ligne. On a ainsi constitué un premier groupe de deux cercles.

En dupliquant ce premier groupe de deux cercles (à l'aide d'une balise use), on passe donc à 4 cercles. Ce qui permet de constituer un groupe de 4 cercles, que l'on duplique afin de passer à 8 cercles.

Ces huit cercles constituent un groupe que l'on duplique...

Grille de disques

Écrire un code reproduisant la figure suivante.

Cette figure est constituée de 8 lignes de 16 disques chacune.

Vous respecterez les contraintes suivantes :

  • Un seul cercle doit être défini dans le code.
  • Vous utiliserez au plus 7 balises use qui présenteront des attributs transform="translate(..., ...)".

Il faudra donc faire des regroupements à l'aide de la balise g de façon à minimiser le nombre de balises use utilisées.

  • un code possible

Après avoir constitué la première ligne comme dans l'exercice précédent, cette première ligne constitue elle-même un groupe, que l'on duplique. On a alors un groupe de deux lignes...

Grille de disques, bis

Écrire un code reproduisant la figure suivante.

Cette figure est constituée de 8 lignes de 16 disques chacune.

Vous définirez un disque bleu puis vous reprendrez la structure codée dans l'exercice précédent.

  • zoom
  • imbriquer des balises svg
  • un code possible

Vous pouvez zoomer (ctrl +) sur la page pour mieux voir comment sont constitués les disques bleus.

Il est possible d'avoir une balise svg à l'intérieur d'une balise svg. Cela permet de jouer sur les unités à l'aide des viewBox.

Dans l'exemple ci-dessous, la balise svg interne est déclarée avec width="25" height="25" : les unités utilisées sont celles de la balise svg qui la contient.

Comme un disque rose occupe la totalité de la boîte svg interne (il s'agit en effet d'un disque de diamètre 200 dans une boîte de 200 unités -- ces 200 unités étant les unités relatives à la boîte svg interne), un tel disque rose occupera donc le tiers de la boîte svg externe (puisque la boîte svg interne est une boîte de 25 unités sur 25 unités dans la boîte svg externe de 75 unités sur 75 unités -- unités de la boîte externe).

On peut également utiliser la balise symbol (qui semble mieux interprétée avec firefox):