Scale svg text to fit exact width or width of parent container

Possible duplicate:
SVG scaling format to match container

I have text of unknown length (for example, the title of an element), and I have a container with fixed sizes that should display text without cropping. Instead, the text should be scaled to fit the container.

Example:

<svg>
    <rect width="100px" height="100px" fill="none" stroke="blue" />
    <svg width="100px" height="100px" style="border:black">
        <text dx="1ex" dy="1.5em" >Some Unknown Caption</text>
    </svg>
</svg>

I thought it should be easy with svg, but I can't figure out how to do this. I know that I can do this with Javascript by calculating the scaling factor, but I believe there must be some kind of autoscaling for this general case. I have experimented with the viewbox attribute, but it seems like you should know the sizes of the content that I am not doing.

+5
source share

All Articles