Tests svg dim

by toubia95

HTML

<p>
        Bienvenue au réseau 
        <span class="svg-inline">
            <svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <rect x="2" y="2" width="16" height="16" stroke="black" fill="none" stroke-width="2"/>
                <circle cx="10" cy="10" r="2" fill="black"/>
            </svg>
        </span> !
    </p>

    <p>
        Exemple avec une fraction :
        <span class="svg-fraction">
            <svg viewBox="0 0 40 60" xmlns="http://www.w3.org/2000/svg">
                <text x="20" y="20" font-size="20" text-anchor="middle">1</text>
                <line x1="5" y1="30" x2="35" y2="30" stroke="black" stroke-width="2"/>
                <text x="20" y="50" font-size="20" text-anchor="middle">2</text>
            </svg>
        </span>
    </p>

CSS

body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
            font-size: 1em; /* Taille du texte (modifiable) */
        }
        
        .svg-inline {
            display: inline-block;
            width: 1em; /* Taille proportionnelle au texte */
            height: 1em; /* Taille proportionnelle au texte */
            vertical-align: middle; /* Aligne le carré avec le texte */
        }

        .svg-fraction {
            display: inline-block;
            width: 1em; /* Ajuste la largeur */
            height: 2em; /* Plus haut que le texte */
            vertical-align: -0.2em; /* Ajuste l'alignement vertical pour être bien positionné */
        }