Я создал в иллюстраторе SVG для расположения в качестве фона заголовков на веб-сайте, который я проектирую.
Я пытаюсь найти способ динамического изменения размера этого фонового SVG на основе текста внутри него.
Я уже использовал lengthAdjust =" spacingAndGlyphs "
, однако текст, который я ввел в него, становится довольно сжатым, если это более длинная строка, или довольно растянутым, если это более короткая строка текста.
Ниже мой код:
<!-- 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>