admin/open-school
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

svg correction

Browse Source
This commit is contained in:
laurentbarontini
2026-05-09 22:15:24 +02:00
parent 878e4e9a03
commit 490487a1bd
4 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
SVG_CONTENT_ARCHITECTURE.md
View File

@@ -79,6 +79,7 @@ Règles obligatoires :
- dans une expression, le curseur horizontal avance de la largeur réservée de la fraction plus un espacement minimal de 28 px pour du texte courant et 34 px pour les signes visibles ;
- les signes `+`, `-`, `=`, `<`, `>` sont centrés sur l'axe de la barre de fraction, pas sur la ligne de base des chiffres ;
- les signes de comparaison sont placés au milieu de l'espace entre les deux boîtes de fractions ;
- les chiffres d'une fraction sont équilibrés optiquement autour du trait : le numérateur est placé plus bas que ne le suggère une symétrie de baseline SVG pure, afin que l'espace visible au-dessus et au-dessous du trait paraisse identique ;
- une fraction posée près d'une figure utilise une zone mathématique dédiée au-dessus, en dessous ou à côté de la figure ; elle ne flotte jamais dans la zone de dessin ;
- les lignes d'équations sont espacées d'au moins la hauteur réservée de la plus grande fraction de la ligne plus 18 px ;
- une fraction inline dans une phrase garde un espace réservé avant et après, même si le texte semble court ;

6
backend/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/03_fraction_sur_demi_droite_graduee.svg
View File

@@ -8,7 +8,7 @@
<g transform="translate(120 245)"><rect width="1360" height="360" rx="24" class="soft"/><g class="math-expression" transform="translate(34 74)">
<text x="0" y="17" class="h2">Exemple : placer</text>
<g transform="translate(320 0)" class="fraction-g" data-box="-4 -38 50 92">
<text x="21" y="-17" text-anchor="middle" class="h2">5</text>
<text x="21" y="-10" text-anchor="middle" class="h2">5</text>
<line x1="0" y1="7" x2="42" y2="7" class="frac-line"/>
<text x="21" y="39" text-anchor="middle" class="h2">4</text>
</g>
@@ -22,13 +22,13 @@
<line x1="300" y1="202" x2="300" y2="238" class="tick"/><circle cx="300" cy="220" r="16" class="orange"/><line x1="360" y1="202" x2="360" y2="238" class="tick"/><line x1="420" y1="202" x2="420" y2="238" class="tick"/>
</g><g class="math-expression" transform="translate(411 125)">
<g transform="translate(0 0)" class="fraction-g" data-box="-4 -30 46 76">
<text x="19" y="-14" text-anchor="middle" class="body">5</text>
<text x="19" y="-8" text-anchor="middle" class="body">5</text>
<line x1="0" y1="5" x2="38" y2="5" class="frac-line"/>
<text x="19" y="34" text-anchor="middle" class="body">4</text>
</g>
</g><text x="820" y="150" class="body">Dénominateur 4 :</text><text x="820" y="195" class="body">chaque unité a 4 parts.</text><g class="math-expression" transform="translate(820 238)">
<g transform="translate(0 0)" class="fraction-g" data-box="-4 -30 46 76">
<text x="19" y="-14" text-anchor="middle" class="body">5</text>
<text x="19" y="-8" text-anchor="middle" class="body">5</text>
<line x1="0" y1="5" x2="38" y2="5" class="frac-line"/>
<text x="19" y="34" text-anchor="middle" class="body">4</text>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

16
backend/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/04_fraction_superieure_a_un.svg
View File

@@ -8,7 +8,7 @@
<g transform="translate(120 245)"><rect width="640" height="360" rx="24" class="soft"/><g class="math-expression" transform="translate(34 76)">
<text x="0" y="17" class="h2">Exemple :</text>
<g transform="translate(238 0)" class="fraction-g" data-box="0 -33 42 84">
<text x="21" y="-21" text-anchor="middle" class="h2">7</text>
<text x="21" y="-12" text-anchor="middle" class="h2">7</text>
<line x1="0" y1="4" x2="42" y2="4" class="frac-line"/>
<text x="21" y="39" text-anchor="middle" class="h2">4</text>
</g>
@@ -30,34 +30,34 @@
</g></g>
<g transform="translate(825 245)"><rect width="625" height="360" rx="24" class="panel"/><text x="36" y="48" class="h2">Je décompose</text><g class="math-expression" transform="translate(70 120)">
<g transform="translate(0 0)" class="fraction-g" data-box="-5 -44 62 112">
<text x="26" y="-20" text-anchor="middle" class="num">7</text>
<text x="26" y="-12" text-anchor="middle" class="num">7</text>
<line x1="0" y1="8" x2="52" y2="8" class="frac-line"/>
<text x="26" y="54" text-anchor="middle" class="num">4</text>
</g>
<text x="82" y="21" class="op">=</text>
<g transform="translate(146 0)" class="fraction-g" data-box="-5 -44 62 112">
<text x="26" y="-20" text-anchor="middle" class="num">4</text>
<text x="26" y="-12" text-anchor="middle" class="num">4</text>
<line x1="0" y1="8" x2="52" y2="8" class="frac-line"/>
<text x="26" y="54" text-anchor="middle" class="num">4</text>
</g>
<text x="228" y="21" class="op">+</text>
<g transform="translate(292 0)" class="fraction-g" data-box="-5 -44 62 112">
<text x="26" y="-20" text-anchor="middle" class="num">3</text>
<text x="26" y="-12" text-anchor="middle" class="num">3</text>
<line x1="0" y1="8" x2="52" y2="8" class="frac-line"/>
<text x="26" y="54" text-anchor="middle" class="num">4</text>
</g>
</g><g class="math-expression" transform="translate(70 235)">
</g><g class="math-expression" transform="translate(70 258)">
<g transform="translate(0 0)" class="fraction-g" data-box="-5 -44 62 112">
<text x="26" y="-20" text-anchor="middle" class="num">7</text>
<text x="26" y="-12" text-anchor="middle" class="num">7</text>
<line x1="0" y1="8" x2="52" y2="8" class="frac-line"/>
<text x="26" y="54" text-anchor="middle" class="num">4</text>
</g>
<text x="82" y="21" class="op">= 1 +</text>
<g transform="translate(232 0)" class="fraction-g" data-box="-5 -44 62 112">
<text x="26" y="-20" text-anchor="middle" class="num">3</text>
<text x="26" y="-12" text-anchor="middle" class="num">3</text>
<line x1="0" y1="8" x2="52" y2="8" class="frac-line"/>
<text x="26" y="54" text-anchor="middle" class="num">4</text>
</g>
</g><text x="70" y="332" class="body">La première unité est complète.</text><text x="70" y="358" class="body">Il reste encore trois quarts.</text></g>
</g><text x="380" y="314" class="body">La première unité est complète.</text><text x="380" y="344" class="body">Il reste encore trois quarts.</text></g>
<g transform="translate(170 660)"><rect width="1260" height="105" rx="24" class="panel"/><text x="36" y="47" class="h2">À retenir</text><text x="36" y="84" class="body">Une fraction peut être plus grande que 1 : il faut alors utiliser plusieurs unités.</text></g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

12
backend/contenus_pedagogiques/cycle_3/mathematiques/cm1/01_nombres_calcul_resolution/01B_fractions/svg/07_additionner_soustraire_fractions_simples.svg
View File

@@ -7,19 +7,19 @@
<line x1="430" y1="194" x2="1170" y2="194" stroke="#dbe8e3" stroke-width="4"/>
<g transform="translate(120 245)"><rect width="640" height="360" rx="24" class="soft"/><text x="34" y="60" class="h2">Exemple</text><g class="math-expression" transform="translate(80 120)">
<g transform="translate(0 0)" class="fraction-g" data-box="-5 -44 62 112">
<text x="26" y="-20" text-anchor="middle" class="num">2</text>
<text x="26" y="-12" text-anchor="middle" class="num">2</text>
<line x1="0" y1="8" x2="52" y2="8" class="frac-line"/>
<text x="26" y="54" text-anchor="middle" class="num">7</text>
</g>
<text x="86" y="21" class="op">+</text>
<g transform="translate(154 0)" class="fraction-g" data-box="-5 -44 62 112">
<text x="26" y="-20" text-anchor="middle" class="num">3</text>
<text x="26" y="-12" text-anchor="middle" class="num">3</text>
<line x1="0" y1="8" x2="52" y2="8" class="frac-line"/>
<text x="26" y="54" text-anchor="middle" class="num">7</text>
</g>
<text x="240" y="21" class="op">=</text>
<g transform="translate(308 0)" class="fraction-g" data-box="-5 -44 62 112">
<text x="26" y="-20" text-anchor="middle" class="num">5</text>
<text x="26" y="-12" text-anchor="middle" class="num">5</text>
<line x1="0" y1="8" x2="52" y2="8" class="frac-line"/>
<text x="26" y="54" text-anchor="middle" class="num">7</text>
</g>
@@ -38,19 +38,19 @@
</g></g>
<g transform="translate(825 245)"><rect width="625" height="360" rx="24" class="panel"/><text x="36" y="60" class="h2">La règle</text><text x="65" y="135" class="body">Je garde le dénominateur.</text><text x="65" y="180" class="body">J&#x27;ajoute ou je retire</text><text x="65" y="218" class="body">seulement les numérateurs.</text><g class="math-expression" transform="translate(65 270)">
<g transform="translate(0 0)" class="fraction-g" data-box="-5 -44 62 112">
<text x="26" y="-20" text-anchor="middle" class="num">6</text>
<text x="26" y="-12" text-anchor="middle" class="num">6</text>
<line x1="0" y1="8" x2="52" y2="8" class="frac-line"/>
<text x="26" y="54" text-anchor="middle" class="num">8</text>
</g>
<text x="86" y="21" class="op">-</text>
<g transform="translate(154 0)" class="fraction-g" data-box="-5 -44 62 112">
<text x="26" y="-20" text-anchor="middle" class="num">2</text>
<text x="26" y="-12" text-anchor="middle" class="num">2</text>
<line x1="0" y1="8" x2="52" y2="8" class="frac-line"/>
<text x="26" y="54" text-anchor="middle" class="num">8</text>
</g>
<text x="240" y="21" class="op">=</text>
<g transform="translate(308 0)" class="fraction-g" data-box="-5 -44 62 112">
<text x="26" y="-20" text-anchor="middle" class="num">4</text>
<text x="26" y="-12" text-anchor="middle" class="num">4</text>
<line x1="0" y1="8" x2="52" y2="8" class="frac-line"/>
<text x="26" y="54" text-anchor="middle" class="num">8</text>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB