« Découvrir le SVG/Le SVG pour l'enseignement des mathématiques et de la programmation » : différence entre les versions
Contenu supprimé Contenu ajouté
m →1. Découvrir le SVG et premier exemple : image, précision |
→Généralités : ficher css + grille |
||
Ligne 31 :
** S'assurer que les outils sont facilement accessibles, par exemple par des icônes sur le bureau.
** Définir le répertoire (dossier) de travail et s'assurer qu'il est facilement accessible, par exemple par un raccourci sur le bureau.
** Dans le répertoire de travail, créer
*** un fichier <code>z_styleSVG.css</code> indiquant que par défaut, la largeur du trait vaut {{formatnum:0.04}}, sa couleur est noire et que le remplissage est vide ;
*** un fichier <code>z_sgrille.svg</code> traçant un cadre et une grille régulière 10 × 10, le tout en gris clair et avec une épaisseur de trait de {{formatnum:0.02}} ;
*** un fichier <code>00_modele.svg</code> contenant le cadre de travail vide, c'est-à-dire l'en-tête et l'élément <code><svg …> … </svg></code> vide. Mettre ce fichier en lecture seule.
'''Fichier <code>
<source lang="css">
/* Déclaration 1 : jeu de caractères utilisable */
@charset "UTF-8"; /* ISO Latin-1 */
/* Déclaration 2 : paramètres généraux des éléments */
svg {
stroke: black;
stroke-width: 0.04;
fill: none
}
</source>
'''Fichier <code>z_grille.svg</code>'''
<source lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
>
<svg
width="100" height="100" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title> Grille </title>
<desc> pour faciliter le repérage </desc>
<defs>
<style type="text/css"><![CDATA[
rect {
fill: none;
stroke: lightgray;
stroke-width: 0.02
}
line {
fill: none;
stroke: lightgray;
stroke-width: 0.02
}
]]></style>
</defs>
<symbol id="horizontale">
<line x1="0" y1="0" x2="100%" y2="0" />
</symbol>
<symbol id="verticale">
<line x1="0" y1="0" x2="0" y2="100%" />
</symbol>
<!-- Cadre extérieur -->
<rect
x="0" y="0" width="100%" height="100%"
/>
<!-- Lignes horizontales -->
<use xlink:href="#horizontale" y="10%" />
<use xlink:href="#horizontale" y="20%" />
<use xlink:href="#horizontale" y="30%" />
<use xlink:href="#horizontale" y="40%" />
<use xlink:href="#horizontale" y="50%" />
<use xlink:href="#horizontale" y="60%" />
<use xlink:href="#horizontale" y="70%" />
<use xlink:href="#horizontale" y="80%" />
<use xlink:href="#horizontale" y="90%" />
<!-- Lignes verticales -->
<use xlink:href="#verticale" x="10%" />
<use xlink:href="#verticale" x="20%" />
<use xlink:href="#verticale" x="30%" />
<use xlink:href="#verticale" x="40%" />
<use xlink:href="#verticale" x="50%" />
<use xlink:href="#verticale" x="60%" />
<use xlink:href="#verticale" x="70%" />
<use xlink:href="#verticale" x="80%" />
<use xlink:href="#verticale" x="90%" />
</svg>
</source>
'''Fichier <code>00_modele.svg</code>'''
<source lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="z_styleSVG.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
Ligne 41 ⟶ 128 :
<svg
width="
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 10 10"
transform="matrix(1, 0, 0, -1, 0, 708)"
>
Ligne 49 ⟶ 138 :
<desc> Description </desc>
<image
xlink:href="z_grille.svg"
width="100%" height="100%"
/>
<!-- Écrire vos instructions ici -->
| |||