Alex Rivera | Logout

SVG Scaling Text to fit container

Asked 2010-05-30T13:21:51.807
57

This is likely a very simple question, but how do I get text in SVG to stretch to fit its container?

I don't care if it looks ugly from being stretched too long or high, but it needs to fits its container and be as big as possible.

Thanks

xml xhtml svg viewbox
Edit
Report

1 Answer

15

Maybe this could work for you. You'd have to tweak the values, but it does resize when the parent div resizes. Here's my dabblet example. It works similarly to fittext.js

I used the ‘viewBox’ & ‘preserveAspectRatio’ attributes.

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

other resources I looked at:

answered 2013-03-24T10:28:10.247

Your Answer