web-dev-qa-db-fra.com

Texte de mise à l'échelle SVG pour s'adapter au conteneur

C'est probablement une question très simple, mais comment puis-je faire en sorte que le texte en SVG s'étire pour s'adapter à son conteneur?

Peu m'importe si elle a l'air moche d'être étirée trop longtemps ou trop haut, mais elle doit s'adapter à son contenant et être aussi grande que possible.

Merci

xmlxhtmlsvgviewbox
32
Tom

Si vous ne vous souciez vraiment pas de la laideur du texte, voici comment adapter le texte de longueur inconnue à une largeur connue.

<svg width="436" height="180"
    style="border:solid 6px"
    xmlns="http://www.w3.org/2000/svg">
    <g>
        <text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text>
    </g>
</svg>

enter image description here

21
Bemmu

Voici ce que j'ai trouvé ... C'est similaire à ce que d'autres personnes ont posté, mais je pense qu'il se redimensionne et évolue bien. Ce code ajoutera un espacement à tout texte d'environ 10 à 25 caractères pour lui faire remplir toute la largeur de son parent. Si vous avez besoin d'un texte plus long ou plus court, ajustez simplement les attributs viewBox width et textLength.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox='0 0 300 24'>
<text textLength='290' lengthAdjust="spacing" x='5' y="14" >
    Some Unknown Text that is resizing
</text>
</svg>
12
DiggityDug

Peut-être que cela pourrait fonctionner pour vous. Vous devez modifier les valeurs, mais il se redimensionne lorsque le div parent redimensionne. Voici mon exemple de dabblet. Il fonctionne de manière similaire à fittext.js

J'ai utilisé les attributs ‘viewBox’ & ‘preserveAspectRatio’ .

<svg><text x="50%" y="50%" dy=".3em">Look, I’m centered!</text></svg>
<svg viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet"><text font-size="16" dy=".3em" >I’m also resizeable!</text></svg>

d'autres ressources que j'ai regardées:

10
Stoikerty