在 SVG 背景矩形内放置 SVG 文本

Question

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.

Here is the CodePen.

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="[{&quot;type&quot;:&quot;translate&quot;,&quot;args&quot;:[-2.72,-0.45]},{&quot;type&quot;:&quot;scale&quot;,&quot;args&quot;:[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..??

Answer 1

Since the box is very small and the text is very long the text will be bearly visible.

In javascript I'm getting the length of the text: span15.getComputedTextLength() and I'm using this value for the viewBox attribute

 let text_length = span15.getComputedTextLength(); document.querySelector("#first").setAttribute("viewBox",`0 0 ${text_length} 45`)

 @font-face { font-family: "Heebo-Light"; src: url(Heebo-Light.ttf) format("truetype"); } svg { position: relative; display: block; overflow: visible; pointer-events: none; outline:solid red; } body { background-color: #FDFDFD; overflow: hidden; }.box { position: relative; height: 2.59vw; outline:solid; }

 <div id="box-13" class="box" style="width: 35.0663246486498vw;"> <svg id="first" 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="span15">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> </div>

Answer 2

 <div id="box-13" class="box" style="width: 35.0663246486498vw;"> <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="[{&quot;type&quot;:&quot;translate&quot;,&quot;args&quot;:[-2.72,-0.45]},{&quot;type&quot;:&quot;scale&quot;,&quot;args&quot;:[1.0199999809265137,1.0199999809265137]}]"></use> <g id="uniqueDomIdC-4"> <g> <path d="M0,0L272,0 272,45 0,45z" fill="url(#uniqueDomIdA-4)"></path> <foreignObject x="0" y="0" width="100%" height="100%" > <p style="font-size: 1.8vw;line-height:1.2;text-align:center;">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</p> </foreignObject> </g> </g> </svg> </div>