Auto-Scaling SVG TEXT ---> beside auto-scaling svg shapes!
Hello world!
How can we make the text inside an svg to be scalable in a row, just like other svg, which fit the available width of the whole container and adjust their height to match other elements so they all fit.
The text should fit it's "flex area" and the other shapes would need to also fit the width of the full screen, meaning they would get smaller in height if there is a lot of text like in y example:
https://codepen.io/Goetzeiscool/pen/YzgjYKW
13 Replies
I would normally try to expand the font into a shape so it actually acts as you expect it.
Managing the size otherwise is a bit more complicated I think, probably not worth the effort unless you 100% need it as text for a specific reason
I wouldn't use SVG text unless it was in the same SVG as the shapes.
As you have it just use normal p with a fluid clamp with container query or viewport. Also if you want elements to fit be default make the patent grid not flex. You will have more control that way. Vs trying to flex basis/shrink/grow/
Hmm, so you are saying I can do SVG, and inside the path and the text tags inside the same SVG? Will try this later
I mean I'm saying I would not do the text in SVG unless I had to
With your current layout there is no reason the text has to be svg right? you can just use a fluid clamp fontsize or something with container queries or just clamp off vw?
That's true, I did something similar already, I made the svg and the text inside div the same height vh
And it also works ok with flex
I just wanted to do it with svg
If it was possible
Why though?
Just to learn? or is there a specific case?
Just to learn, yes
I was wondering if it's possible to make the text automatically the same height as SVG
Without specifying the height
For both
Even though <text> element can be read by screenreaders I would still avoid using them without a clear goal inmind
Like masking with svg <text> or something
Will check what this is 😁
Oh nice, this is similar to clip path?
kinda? SVG masking is powerfull stuffs
i.e. https://codepen.io/b1mind/pen/vYZEVXy
Its pretty easy too 😄
Oh my good
Looks awesome
But hard?
Ah, you have some JS
Don't really know that yet
I made something ... Similar, but not really
https://jsfiddle.net/janezek/g16xcfsb/49/
5 good: title - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
that is only for the animations you can use keyframes/css too no need for JS its just what I use to animate with most the time