Différences entre les versions de « Découvrir le SVG/Le SVG pour l'enseignement des mathématiques et de la programmation »

→‎Généralités : ficher css + grille
(→‎Généralités : ficher css + grille)
** 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 unles fichierfichiers suivants en lecture seule (les préfixes <code>modèle.svg0_</code> contenantet le<code>z_</code> cadreassurent de travail vide, cqu'est-à-direavec l'en-têtele etclassement l'élémentalphabétique, <code>&lt;svgles …&gt;fichiers seront &lt;/svg&gt;</code>toujours vide.respectivement Mettreen cetête fichieret en lecturequeue seule.de liste) :
*** 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>&lt;svg …&gt; … &lt;/svg&gt;</code> vide. Mettre ce fichier en lecture seule.
 
'''Fichier <code>modèlez_styleSVG.svgcss</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"
 
<svg
width="10cm708" height="10cm708" version="1.1"
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)"
>
 
<desc> Description </desc>
 
<image
xlink:href="z_grille.svg"
width="100%" height="100%"
/>
<!-- Écrire vos instructions ici -->
 
13 161

modifications