Menu
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
831
You can use the scale(x,y) transform command to scale an element. A scale of 1 is normal size, 0.5 is half normal size, and 2 is double normal size. For example, add transform="scale(1, 2)" to your tag to scale it normally horizontally and twice the size vertically.
You could arrange for the viewBox area to be enlarged to fit the wider SVG dimensions (equivalent to HTML's background-size: cover ), by adding preserveAspectRatio="xMidYMid slice" to the SVG.
The viewBox is an attribute of the SVG element in HTML. It is used to scale the SVG element that means we can set the coordinates as well as width and height. Syntax: viewBox = "min-x min-y width height" Attribute Values: min-x: It is used to set the horizontal axis.
If you really don't care that the text gets ugly, here's how to fit unknown length text into a known width.
<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> 
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
