Ubuntu-fr

luigifab

Comment définir la taille du texte dans un fichier SVG ?

Bonsoir

Comment définir la taille de la police d'un texte dans un fichier SVG pour que celle-ci soit dynamique ?

Je m'explique, j'ai un fichier SVG de 500px par 500px, avec un texte avec une taille de 350%, le rendu est parfait.
Cependant, si je modifie la taille du fichier SVG, par exemple 100px par 100px, la taille du texte fait n'importe quoi.

Du coup, je ne sais pas comment définir la taille de mon texte ?
Après, il est possible aussi que je n'ai rien compris...

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<text x="42%" y="47%" font-family="Verdana, sans-serif" font-size="350%" font-weight="bold" fill="black">ERREUR</text>
	<text x="42%" y="59%" font-family="Verdana, sans-serif" font-size="350%" font-weight="bold" fill="black">404</text>
	<line x1="15%" y1="37%" x2="16.75%" y2="39%" stroke="black" stroke-width="6%" stroke-linecap="round" />
	<circle cx="25%" cy="50%" r="15%" fill="black" />
	<line x1="18.5%" y1="43.5%" x2="31.5%" y2="56.5%" stroke="red" stroke-width="7%" stroke-linecap="round" />
	<line x1="31.5%" y1="43.5%" x2="18.5%" y2="56.5%" stroke="red" stroke-width="7%" stroke-linecap="round" />
</svg>

---

Free Ukraine!

fabkzo

Re : Comment définir la taille du texte dans un fichier SVG ?

Bonsoir,

Voilà ce que j'ai trouvé de plus simple de mon côté:
Tu remplaces les 350% des font-size par un nombre sans unité ( il me semble que ça corresponde à des pixels par défaut ), que tu devras adapter en fonction de la taille de ton image; ici tu veux diviser par 5 la taille de ton image, donc tu divises la taille de ton texte par cinq.Effectivement on aurait pu s'attendre à ce que le texte s'adapte à la taille de l'image comme ton motif mais cela doit être inhérent à la balise <text> du svg...

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<text x="42%" y="47%" font-family="Verdana, sans-serif" font-size="50" font-weight="bold" fill="black">ERREUR</text>
	<text x="42%" y="59%" font-family="Verdana, sans-serif" font-size="50" font-weight="bold" fill="black">404</text>
	<line x1="15%" y1="37%" x2="16.75%" y2="39%" stroke="black" stroke-width="6%" stroke-linecap="round" />
	<circle cx="25%" cy="50%" r="15%" fill="black" />
	<line x1="18.5%" y1="43.5%" x2="31.5%" y2="56.5%" stroke="red" stroke-width="7%" stroke-linecap="round" />
	<line x1="31.5%" y1="43.5%" x2="18.5%" y2="56.5%" stroke="red" stroke-width="7%" stroke-linecap="round" />
</svg>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<text x="42%" y="47%" font-family="Verdana, sans-serif" font-size="10" font-weight="bold" fill="black">ERREUR</text>
	<text x="42%" y="59%" font-family="Verdana, sans-serif" font-size="10" font-weight="bold" fill="black">404</text>
	<line x1="15%" y1="37%" x2="16.75%" y2="39%" stroke="black" stroke-width="6%" stroke-linecap="round" />
	<circle cx="25%" cy="50%" r="15%" fill="black" />
	<line x1="18.5%" y1="43.5%" x2="31.5%" y2="56.5%" stroke="red" stroke-width="7%" stroke-linecap="round" />
	<line x1="31.5%" y1="43.5%" x2="18.5%" y2="56.5%" stroke="red" stroke-width="7%" stroke-linecap="round" />
</svg>

J'ai aussi testé l'image en tant que balise HTML, avec des CSS; l'effet est le même. as-tu testé en changeant ton texte en chemin?

---

pinterest ==> fabkzo!
Python beginner on Rpi
http://www.fabkzo.com

luigifab

Re : Comment définir la taille du texte dans un fichier SVG ?

Non je n'ai pas essayé de transformer le texte en chemin, et je suis pas sur que ce soit une bonne idée pour ce que je veux faire (le texte dépend de la langue).
Du coup, faute de mieux, et étant donnée que mon fichier SVG est le résultat de quelques lignes de PHP, je fais un petit calcul pour trouver la taille du texte en fonction de la taille de l'image.

---

Free Ukraine!