Valeur de cette activité : 5 points
Compétence :
04- SVG-Les groupes

A-Module 05 : SVG : 5 points - difficulté : 2

SVG Les groupes

Présentation

Le langage SVG permet de dessiner différentes formes : cercles, rectangles, lignes, ovales, polygones, tracés et du texte.

Si vous désirez appliquer les mêmes attributs (taille, couleur,...) à plusieurs éléments, vous pouez utiliser LES GROUPES.

Consultez ce site : cliquez ici afin d'obtenir des informations détaillées concernant les groupes SVG.

Pour consulter des exemples SVG, cliquez ici.

Pour consulter un cours d'introduction au langage SVG : Cours ESI Montréal
ou
Cours SVG Euroclid



Description


Dans cette exercice. vous dessinerez à l'aide du code SVG une forme ovale et une forme rectangulaire.
Ensuite, vous appliquerez à ces éléments en utilisant le groupement une largeur de trait (stroke-width:10; et) de votre choix et une couleur de fond de votre choix (fill:blue;).




  1. Ajoutez une page à votre portfolio en affichant la directive 12977.
    Complétez les informations suivantes :
  2. dans le champ titre : Le groupement SVG
  3. Dans le champ section : Module SVG
  4. un titre de niveau 1 : Le groupement SVG




  5. Cliquez le bouton SVG afin d'afficher les assistants SVG
  6. Cliquez le bouton SVG afin d'effectuer la déclaration XML.
    Notez que dans ce code vous devez spécifier la taille de l'affichage :
    Exemple : <svg width="200" height="200"></svg>
  7. Pour insérez votre forme ovale, placez votre curseur entre les balise SVG et /SVG et SVG_ELLIPSE
  8. - Réglez la taille de la forme ovale dans des dimensions de votre choix.


  9. Pour insérez votre rectangle, placez votre curseur à la suite de votre forme ovale et cliquez le bouton SVG_RECTANGLE
  10. - Précisez ensuite l'emplacement de ce rectangle en modifiant les propriétés x et y.

    Pour insérez votre groupement, placez votre curseur à la suite de votre rectangle et sélectionnez à partir de la boîte à liste déroulante
  11. - SVG_GROUPEMENT .
  12. -Ne conservez que : les lignes suivantes :
    <g style="fill:blue;font-size:11;font-family:Arial"> et </g> Placez la ligne: <g style="fill:blue;font-size:11;font-family:Arial"> avant votre forme ovale et placez </g> après votre rectangle.
  13. -REMPLACEZ le STYLE de votre balise groupement par fill:blue;stroke-width:10;

  14. Supprimez le paramètre STYLE="..." des objets ELLIPSE ET RECT.

  15. Appliquez ensuite trois autres propriétés de votre choix à ce regroupement :
    Utilisez une des méthodes suivantes pour trouver des propriétés SVG à utiliser
    Méthode 1 : Affichez le site http://www.w3.org/TR/SVG/styling.html
    Méthode 2 : Consulte au besoin cette liste de propriétés SVG
    Méthode 3 : Utilise au besoin Google avec les mots de recherche "SVG style properties" ou "SVG propriétés de style"
    Méthode 3 :enregistre au besoin un fichier svg sur le bureau (clic droit - enregistrer le fichier svg).
    - Ouvre ensuite ce fichier dans le bloc-note.
    - Identifie les propriétés de style utilisées
    - Identifie deux propriétés et utilise-les dans ton fichier


  16. Ajoute ensuite le nom des 5 propriétés utilisées.
  17. Cochez la case à cocher de correction du travail

  18. Enregistrez cette page, visualisez votre travail et apportez les corrections au besoin.

    Cette page servira à la correction de votre travail et à transmettre mes commentaires concernant ton travail.