SVG Ridimensionamento del testo per adattarsi al contenitore

Question

Questa è probabilmente una domanda molto semplice, ma come faccio a ottenere il testo in SVG per adattarlo al suo contenitore?

Non mi importa se sembra brutto per essere allungato troppo a lungo o troppo alto, ma deve adattarsi al suo contenitore ed essere il più grande possibile.

Grazie

Answer 1

Il viewbox attribute è quello che serve.

Answer 2

Se davvero non ti interessa che il testo diventi brutto, ecco come inserire un testo di lunghezza sconosciuta in una larghezza nota.

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

Answer 3

forse questo potrebbe funzionare per voi. Dovresti modificare i valori, ma ridimensiona quando il div padre viene ridimensionato. Here's my dabblet example. Funziona in modo simile a fittext.js

ho usato il ‘viewBox’ & ‘preserveAspectRatio’ attributi.

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

altre risorse ho guardato:

• Making Sense of SVG viewBox's Madness
• How to Style Scalable Vector Graphics Using CSS

Answer 4

Ecco quello che io sono venuto con ... Il suo simile a quello che gli altri hanno inviato, ma penso che ridimensiona e scala bene. Questo codice aggiungerà la spaziatura a qualsiasi testo all'incirca tra 10-25 caratteri per riempire l'intera larghezza del suo genitore. Se hai bisogno di un testo più lungo o più corto, regola solo la larghezza del ViewBox e gli attributi 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>