Valeur de cette activité : 5 points
Compétence :
06- SVG Les dégradés

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

SVG dégradés

Présentation

Les formes et le texte SVG peuvent être remplis de différentes façons, avec des couleurs, des dégradés ou des motifs. Pour compléter la définition des propriétés d'une forme ou de texte, on utilise l'attribut style, qui permet de gérer l'apparence des objets.

Nous allons voir ici quelles sont les propriétés de stylage les plus courantes.



Description


Notez qu'à partir de maintenant, les directives ne seront plus présentées dans le détails.
La tâche vous sera décrite et une référence vous sera donnée.
Ainsi, vous serez en mesure d'améliorer votre autonomie dans votre processus d'apprentissage.

La tâche sera un peu plus difficile car vous aurez à :
- identifier le contenu à apprendre
- identifier et récupérer le code à utiliser
- utiliser ce code afin de produire votre travail

Le temps requis afin d'effectuer votre travail sera plus long mais cette méthode vous permettra de mieux comprendre et retenir les concepts et leur utilisation.


Notez également que vous pouvez afficher la source d'un fichier SVG en utilisant le CLIC DROIT / AFFICHER LA SOURCE.

Dans cette exercice, en utilisant les exemples offerts sur la page : plusieurs exemples de filtres (voir la liste de gauche ...Gradient_...)
ou en utilisant le site https://www.w3schools.com/graphics/svg_intro.asp créez un document SVG qui contiendra :

- Trois formes contenant pour chacune un dégradé de couleur différente.



    1. Ajoutez une page à votre portfolio en affichant la directive 13090.
      Complétez les informations suivantes :
    2. dans le champ titre : Les dégradés SVG
    3. Dans le champ section : Module SVG
    4. un titre de niveau 1 : Les dégradés 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 :
      <svg width="500" height="500"></svg>

      -Insérez ensuite dans ce code (en vous servant des exemples données sur la page : https://www.w3schools.com/graphics/svg_intro.asp
      chacun des éléments requis suivants :
      -
      - une forme de votre choix contenant un dégradé linéaire contenant 3 couleurs
      - une forme de votre choix contenant un dégradé radial (circulaire) contenant 4 couleurs
      - une forme de votre choix contenant un dégradé de votre choix




    7. Cochez la case à cocher de correction du travail

    8. 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.