SVG Escalado de texto para encajar en el contenedor

Probablemente esta sea una pregunta muy simple, pero ¿cómo hago para que el texto en SVG se estire y se ajuste a su contenedor?SVG Escalado de texto para encajar en el contenedor

No me importa si se ve feo por estirarse demasiado tiempo o demasiado alto, pero debe ajustarse a su contenedor y ser lo más grande posible.

Gracias

Fuente

2010-05-30 Tom

El viewbox attribute es lo que necesita.

Fuente

2010-05-30 13:32:33 msw

dulce, funciona a la perfección! Un poco confunde al principio aunque – Tom

+22

¿Puedes dar un ejemplo? No lo entiendo La vista necesita las dimensiones y no sé qué tan ancho se pone mi texto. –

Creo que esta respuesta es para contenedor de tamaño variable, no para texto de tamaño variable. – algiecas

Si realmente no le importa que el texto se ponga feo, aquí le mostramos cómo ajustar el texto de longitud desconocida en un ancho conocido.

<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

Fuente

2013-03-15 10:46:36 Bemmu

¿Funciona esto en IE? Parece que no funciona, pero tengo muchas otras cosas en juego. – whyoz

Es posible que necesite utilizar un espacio irrompible si el texto comienza o termina con espacio. –

Tal vez esto podría funcionar para usted. Tendría que modificar los valores, pero cambia el tamaño cuando el div principal se redimensiona. Here's my dabblet example. Funciona de manera similar a fittext.js

he utilizado la ‘viewBox’ & ‘preserveAspectRatio’ atributos.

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

otros recursos que se miraron:

Fuente

2013-03-24 10:28:10 Stoikerty

awesome gist yoschi, gracias hombre – zanona

de nada. es una de mis primeras contribuciones al "internet", así que me alegra saber que pude contactar a alguien. (Me llamo Stoikerty ahora: P) – Stoikerty

Aquí es lo que he llegado con ... Su similar a lo que otras personas han publicado, pero creo que cambia de tamaño y escala muy bien. Este código agregará espacio a cualquier texto de aproximadamente 10 a 25 caracteres para que ocupe todo el ancho de su elemento primario. Si necesita texto más largo o más corto, simplemente ajuste los atributos width y textLength de viewBox.

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

Fuente

2013-12-30 04:09:22 DiggityDug

SVG Escalado de texto para encajar en el contenedor

Respuesta

Cuestiones relacionadas