Here is a box containing two SVGs. one for the text and one for the background rectangle.
I want to fit the text inside the background rectangle. so that there is no text stretching out of the background rectangle. (Note that I don't want to line break the text I want to decrease the dimensions of the text or something to fit the text inside the rectangle in a single line);
I have tried a lot of solutions with no luck and I think maybe there are no pure CSS solutions, So even Javascript to fix this wired issue is accepted.
Note: I really need the text and the background rectangle to be SVGs.
And Here is the code:
@font-face {
font-family: "Heebo-Light";
src: url(Heebo-Light.ttf) format("truetype");
}
svg {
position: relative;
display: block;
overflow: visible;
pointer-events: none;
}
body {
background-color: #FDFDFD;
overflow: hidden;
}
.box svg:nth-of-type(1) {
position: absolute;
z-index: 3;
}
.box svg:nth-of-type(2) {
position: absolute;
z-index: 2;
}
.box, svg {
max-width: 100%;
max-height: 2.59vw;
}
.box {
position: relative;
height: 2.59vw;
}
<div id="box-13" class="box" style="width: 35.0663246486498vw;">
<svg height="100%" width="100%" viewBox="0 0 100 45">
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan id="span-15">This is a long text that should be fit This is a long text that should be fit This is a long text that should be fit</tspan>
</text>
</svg>
<svg height="100%" width="100%" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomIdA-4">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomIdB-4" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomIdC-4" filter="url(#uniqueDomIdB-4)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomIdC-4">
<g>
<path d="M0,0L272,0 272,45 0,45z" fill="url(#uniqueDomIdA-4)"></path>
</g>
</g>
</svg>
</div>
Edit: Changing veiwBox seems promising But I have no idea how to calculate it! I can calculate box width but I don't know how to find viewBox...?
<tspan textLength="100%"
but since your svg is stretched ` height="100%" width="100%"` you'll need to remove the viewBox to make it work (I wouldn't do it). The text will apear jammed together. Another solution would be using a proper viewBox without streatching the svg and recalculating the font size