2010-05-30 18 views
25

Il s'agit probablement d'une question très simple, mais comment puis-je obtenir du texte SVG pour l'étirer afin de l'adapter à son conteneur? Je ne m'inquiète pas si elle semble moche d'être étiré trop longtemps ou trop haut, mais elle doit s'adapter à son récipient et être aussi grande que possible.SVG Mise à l'échelle du texte pour s'adapter au conteneur

Merci

Répondre

3

Le viewbox attribute est ce dont vous avez besoin.

+1

doux, fonctionne parfaitement! J'ai un peu dérouté au début, mais – Tom

+22

Pouvez-vous donner un exemple? Je ne comprends pas. La vue a besoin des dimensions et je ne sais pas quelle est la largeur de mon texte. –

+5

Je pense que cette réponse est pour le conteneur de taille variable, pas pour le texte de taille variable. – algiecas

20

Si vous ne vous souciez pas vraiment du fait que le texte soit moche, voici comment adapter un 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

+0

Est-ce que cela fonctionne dans IE? Cela ne semble pas fonctionner, mais j'ai beaucoup d'autres choses en jeu. – whyoz

+0

Vous devrez peut-être utiliser un espace incassable si votre texte commence ou se termine avec de l'espace. –

7

Peut-être que cela pourrait fonctionner pour vous. Vous auriez à modifier les valeurs, mais il se redimensionne lorsque le div parent se redimensionne. Here's my dabblet example. Il fonctionne de façon similaire à fittext.js

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

<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 je regardé:

+0

impressionnant gist yoschi, merci l'homme – zanona

+1

vous êtes les bienvenus. C'est l'une de mes premières contributions à "Internet", donc je suis content d'apprendre que j'ai pu atteindre quelqu'un. (Je m'appelle Stoikerty maintenant: P) – Stoikerty

5

Voici ce que je suis venu avec ... Son semblable à ce que les autres ont posté, mais je pense qu'il redimensionne et met à l'échelle bien. Ce code va ajouter de l'espacement à n'importe quel texte entre 10 et 25 caractères pour qu'il remplisse toute la largeur de son parent. Si vous avez besoin de 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>