SVG-Skalierung Text passend zum Container

Das ist wahrscheinlich eine sehr einfache Frage, aber wie bekomme ich Text in SVG, um ihn in den Container zu dehnen?SVG-Skalierung Text passend zum Container

Es ist mir egal, ob es hässlich aussieht, wenn man es zu lang oder zu hoch streckt, aber es muss in seinen Behälter passen und so groß wie möglich sein.

Dank

Quelle

2010-05-30 Tom

Die viewbox attribute ist das, was Sie brauchen.

Quelle

2010-05-30 13:32:33 msw

süß, funktioniert perfekt! Ich bin zunächst etwas verwirrend, aber – Tom

+22

Können Sie ein Beispiel geben? Ich verstehe es nicht. Die Viewbox benötigt die Dimensionen und ich weiß nicht, wie breit mein Text wird. –

Ich denke, diese Antwort ist für Container mit variabler Größe, nicht für Text mit variabler Größe. – algiecas

Wenn es Ihnen wirklich egal ist, dass der Text hässlich wird, können Sie Text unbekannter Länge in eine bekannte Breite einfügen.

<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

Quelle

2013-03-15 10:46:36 Bemmu

Funktioniert das in IE? Scheint nicht zu funktionieren, aber ich habe eine Menge anderer Sachen im Spiel. – whyoz

Möglicherweise müssen Sie unbreakable Leerzeichen verwenden, wenn Ihr Text mit Leerzeichen beginnt oder endet. –

Vielleicht könnte dies für Sie arbeiten. Sie müssten die Werte anpassen, die Größe wird jedoch geändert, wenn die Größe des übergeordneten Divs geändert wird. Here's my dabblet example. Es funktioniert ähnlich

ich die ‘viewBox’ & ‘preserveAspectRatio’ Attribute verwendet, um fittext.js.

<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>

andere Ressourcen schaute ich auf:

Quelle

2013-03-24 10:28:10 Stoikerty

awesome gist yoschi, danke mann – zanona

du bist willkommen. es ist einer meiner ersten Beiträge zum "Internet" und ich bin froh zu hören, dass ich jemanden erreichen konnte. (Ich heiße jetzt Stoikerty: P) – Stoikerty

Hier ist, was ich mit ... Es ist ähnlich dem, was andere Leute haben gebucht kommen, aber ich denke, es passt sich gut an und skaliert schön. Dieser Code fügt jedem Text Abstand zwischen etwa 10-25 Zeichen hinzu, damit er die gesamte Breite des übergeordneten Elements ausfüllt. Wenn Sie mehr oder weniger Text benötigen, passen Sie einfach die Attribute viewBox width und textLength an.

<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>

Quelle

2013-12-30 04:09:22 DiggityDug

SVG-Skalierung Text passend zum Container

Antwort

Verwandte Themen