Valeur de cette activité : 5 points
Compétence :
10- SVG Intégration svg et javascript

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

Intégration svg et javascript

Présentation

Vous savez maintenant utiliser différents objets du langage SVG.

Nous allons voir ici comment utiliser conjointement la langage Javascript et le langage SVG.



Cliquez ici afin d'obtenir de l'information sur l'intégration d'un script dans un fichier svg.

Cliquez ici afin d'afficher un exemple complexe d'intégration d'un script dans un fichier svg.

Cliquez ici afin d'afficher plusieurs exemples d'intégration d'un script dans un fichier svg.

Cliquez ici afin d'afficher d'autres exemples d'intégration d'un script dans un fichier svg.



Pour consulter des exemples SVG, cliquez ici ou ici **** .

Pour consulter un cours d'introduction au langage SVG, cliquez ici.

ou
Cours SVG Euroclid


Description



Dans cet exercice, vous allez produire un fichier svg contenant :

-Le texte "Cliquez les mots afin d'afficher un exemple"
-Le texte "Droites perpendiculaires"
-Le texte "Droites parallèles"
-Le texte "Effacer"
-Une fonction javascript afficheperpendiculaire() qui affichera des droites perpendiculaire
-Une fonction javascript afficheparallele() qui affichera des droites parallèles
-Une fonction javascript effacer() qui masquera ces droites

IMPORTANT : Référez vous au code SVG de l'exemple suivant :
A- Affichez ce fichier svg en cliquant ici
B- faites ensuite un "clic droit/enregistrer le fichier svg sous... "
C- Ouvrez ce fichier en utilisant le bloc-note
D- Sélectionnez tout le code et copiez-le




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


  5. Collez le code de l'exemple.

  6. Modifiez ensuite ce code afin de produire un fichier svg contenant :

    -Le texte "Cliquez les mots afin d'afficher un exemple"
    -Le texte "Droites perpendiculaires"
    -Le texte "Droites parallèles"
    -Le texte "Effacer"
    -Une fonction javascript afficheperpendiculaire() qui affichera des droites perpendiculaire
    -Une fonction javascript afficheparallele() qui affichera des droites parallèles
    -Une fonction javascript effacer() qui masquera ces droites


  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.