xml - SVG Scaling Text para adaptarse al contenedor

xhtml viewbox

Question

Esta es probablemente una pregunta muy simple, pero ¿cómo hago para que el texto en SVG se estire y se ajuste a su contenedor?

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

Gracias

Answer 1

Esto es lo que se me ocurrió ... Es similar a lo que otras personas han publicado, pero creo que cambia el 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>

Answer 2

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>

Answer 3

Tal vez esto podría funcionar para ti. Tendría que modificar los valores, pero cambia el tamaño cuando el div principal se redimensiona. Aquí está mi ejemplo de dabblet. Funciona de manera similar a fittext.js

‘viewBox’ y ‘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>

otros recursos que miré:

• Sentido de SVG viewBox''s Madness
• Cómo dar estilo a gráficos vectoriales escalables mediante CSS