SVG mise à l'Échelle le Texte pour l'adapter à conteneur
il S'agit probablement d'une question très simple, mais comment puis-je obtenir du texte dans SVG de s'étirer pour s'adapter à son conteneur?
Je ne me soucie pas si elle regarde laid d'être étiré trop long ou trop haut, mais il doit s'adapter à son récipient et être aussi grand que possible.
Merci
3 réponses
si vous ne vous souciez vraiment pas que le texte devienne laid, voici comment ajuster le texte de longueur inconnue dans 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>
peut-être que ça pourrait marcher pour vous. Vous devez modifier les valeurs, mais il redimensionne quand le div parent redimensionne. Voici mon exemple dabblet. fonctionne de la même manière que 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>
autres ressources que j'ai regardé:
voici ce que j'ai trouvé... C'est similaire à ce que d'autres personnes ont posté, mais je pense qu'il redimensionne et balance bien. Ce code ajoutera de l'espacement à n'importe quel texte approximativement entre 10-25 caractères pour le faire remplir la largeur entière 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>