Inside this box are two SVGs: one for the text and one for the background rectangle.
My goal is to make sure the text fits perfectly within the background rectangle without any stretching or overflowing. I don't want to break the text into multiple lines - I want to adjust the size of the text to fit it all in a single line.
Despite trying numerous solutions without success, I'm open to using JavaScript if necessary to solve this issue with the text and background rectangle both being SVGs.
Note: It is essential for both the text and background rectangle to remain as SVGs.
Here is the CodePen link for reference.
Below you can find the code snippet:
@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: Modifying the viewBox property shows potential, but I'm unsure how to calculate its values. While I can determine the width of the box, viewBox calculation remains a mystery to me. Any advice on this matter would be greatly appreciated.