3.1 KiB
Executable File
layout, title
| layout | title |
|---|---|
| layouts/page.njk | Réponse |
Le milieu de la forme se trouve à 115 / 2 = 57.5px
Origine en 0, 0 -> M0,0
Lettre en minuscule toutes les coordonnées sont relatives au point précédent
Largeur totale -> h115 (ligne horizontale)
Hauteur d"un coté -> v62 (ligne verticale)
partie centrale incurvée -> c
vecteur de contrôle vertical qui descend de 3px ->0 3
point central qui est plus bas de 5px -> -57.5 5
le vecteur issu du point central est horizontal est fait 20px -> (-57.5 + 20) 5 -> -37.5 5\
courbe symétrique -> s
il n'est pas nécessaire de définir le vecteur issu du point central
vecteur de contrôle vertical qui descend de 3px pour l'extremtité gauche -> s-57.5 -2. On descend de 3px du point mais comme nous sommes déja descendu de 5 il faut remonter de 2. La lettre minuscule indique un déplacement relatif par rapport au point précédent.
Extremité gauche -> -57.5 -5 On remonte de 5px
Retour à l'origine et fermer la forme-> z
Déplacement à l'origine de la deuxième forme -> M4,4 -> 4px de marge
Cette fois si il faut se déplacer dans le sens trigonométrique
Descendre de 54px (62 - 4 - 4) -> v54
Aller à l'autre extremité -> 155 - 4 - 4 -> h107
Remonter -> V4 ou v-54
Revenir à l'origine et fermer la forme -> z
<path d="M0,0
h115
v62
c0 3 -37.5 5 -57.5 5
s-57.5 -2 -57.5 -5
z
M4,4 v54 h107 V4 z" />
Le cercle au centre de rayon 2.5
<circle cx="57.5" cy="62" r="2.5" fill="white" />
La balise image
<image href="panda.webp" height="90" clip-path="url(#ecran)" />
<defs>
<clipPath id="ecran">
<rect x="4" y="4" width="107" height="54.5" />
</clipPath>
</defs>
Le fichier
