CODEWITHSUNDEEP
htmlsvgfont-sizestretch
jz00533
jz00533

Reputation: 13

Stretching a complex SVG based on text within it

So I made an Illustrator SVG to work as a background of headers in a website I am designing. I am trying to find a way to dynamically resize this background SVG based on the text that is inside it. I have already used lengthAdjust="spacingAndGlyphs", however, some of the text that I input into it becomes rather squished if it is a longer line, and rather stretched if it is a shorter line of text. I have Googled for solutions for hours to no avail (I may have found a few solutions on other stack overflow pages, however, I cannot seem to get them to work in my case. Then again, I am new to svg in html pages, so maybe it is just my ignorance that is preventing me from understanding them). I am also open to other solutions that do not involve SVGs. Here it is, please let me know if you have any questions. I also made a CodePen project if you wish to mess around with the code: https://codepen.io/jZ00codeR/pen/VgywKJ 

<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 431.31 58.47" style="enable-background:new 0 0 431.31 58.47;" xml:space="preserve">
      <style type="text/css">
	.st0{fill:#005FB3;}
	.st1{fill:none;}
	.st2{fill:#FFFFFF;}
	.st3{font-family:'neue-aachen-pro';font-weight:600;}
	.st4{font-size:40.8839px;}
	.st5{letter-spacing:-1;}
</style>
      <g>
        <path class="st0" d="M431.31,58.47L431.31,58.47c-143.6-9.99-287.71-9.99-431.31,0l0,0l19.76-17.44c10.02-7.32,10.02-16.27,0-23.59
		L0,0l0,0c143.6,9.99,287.71,9.99,431.31,0l0,0l-19.76,17.44c-10.02,7.32-10.02,16.27,0,23.59L431.31,58.47z"/>
        <rect x="27.04" y="6.33" class="st1" width="377.23" height="45.81"/>
        <text transform="matrix(1 0 0 1 40.04 40.407)" class="st2 st3 st4 st5 changeHead" textLength="351.23" lengthAdjust="spacingAndGlyphs">This is the text that is getting squished.</text>
      </g>
    </svg>

Upvotes: 1

Views: 173

Answers (1)

enxaneta
enxaneta

Reputation: 33044

I've made a few changes. The text is now centered around the center of the svg element.

I'm using javascript to calculate the length of the text and resize the text if it's wider than 350units. You may decide this maxim value of 350 in base of the width of the .st1 rect.

// the initial text size
let fontSize = 40;
txt.setAttribute("style", `font-size:${fontSize}px`);
// get the length of the text
let textLength = txt.getComputedTextLength();

while(textLength > 350){// where 350 is the max width allowed
  fontSize --
  txt.setAttribute("style", `font-size:${fontSize}px`);
  textLength = txt.getComputedTextLength();
}
svg{border:1px solid}
text{font-family:'neue-aachen-pro';fill:#FFFFFF;}
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 431.31 58.47" >
<style type="text/css">
	.st0{fill:#005FB3;}
	.st1{fill:none;}	
</style>
      <g>
        <path class="st0" d="M431.31,58.47L431.31,58.47c-143.6-9.99-287.71-9.99-431.31,0l0,0l19.76-17.44c10.02-7.32,10.02-16.27,0-23.59
		L0,0l0,0c143.6,9.99,287.71,9.99,431.31,0l0,0l-19.76,17.44c-10.02,7.32-10.02,16.27,0,23.59L431.31,58.47z"/>
        <rect x="27.04" y="6.33" class="st1" width="377.23" height="45.81"/>
        <text id="txt" dominant-baseline="middle" text-anchor="middle" x="215.655" y="29.235">This is the text, a very long text.</text>
      </g>
    </svg>

UPDATE

This is working on Edge and IE too: Instead of dominant-baseline="middle" I'm using svg transform to translate the text in the center. 

// the initial text size
var fontSize = 40;
txt.setAttribute("style", "font-size:"+fontSize+"px");
// get the length of the text
var textLength = txt.getBBox().width;

while(textLength > 350){// where 350 is the max width allowed
  fontSize --
  txt.setAttribute("style", "font-size:"+fontSize+"px");
   txt.setAttributeNS(null,"transform", "translate(0,"+(fontSize/4)+")");
  textLength = txt.getBBox().width;
}
svg{border:1px solid}
text{font-family:'neue-aachen-pro';fill:#FFFFFF;}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 431.31 58.47" >
<style type="text/css">
	.st0{fill:#005FB3;}
	.st1{fill:none;}	
</style>
      <g>
        <path class="st0" d="M431.31,58.47L431.31,58.47c-143.6-9.99-287.71-9.99-431.31,0l0,0l19.76-17.44c10.02-7.32,10.02-16.27,0-23.59
		L0,0l0,0c143.6,9.99,287.71,9.99,431.31,0l0,0l-19.76,17.44c-10.02,7.32-10.02,16.27,0,23.59L431.31,58.47z"/>
        <rect x="27.04" y="6.33" class="st1" width="377.23" height="45.81"/>
        <text id="txt"  text-anchor="middle" x="215.655" y="29.235">This is the text, a very long text.</text>
      </g>
    </svg>

Upvotes: 1

Related Questions