Растяжение сложного SVG на основе текста внутри него - PullRequest
Новая
       26

Растяжение сложного SVG на основе текста внутри него

0 голосов
/ 07 февраля 2019

Поэтому я создал SVG-иллюстратор для работы в качестве фона заголовков на веб-сайте, который я проектирую.Я пытаюсь найти способ динамического изменения размера этого фонового SVG на основе текста внутри него.Я уже использовал lengthAdjust = "spacingAndGlyphs", однако часть текста, который я ввожу в него, становится довольно сжатой, если это более длинная строка, и довольно растянутой, если это более короткая строка текста.Я часами гуглял решения безрезультатно (возможно, я нашел несколько решений на других страницах переполнения стека, однако я не могу заставить их работать в моем случае. Опять же, я новичок в svg на html-страницах,так что, возможно, только мое невежество мешает мне понять их).Я также открыт для других решений, которые не связаны с SVG.Вот, пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы.Я также сделал проект CodePen, если вы хотите возиться с кодом: 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>

1 Ответ

0 голосов
/ 07 февраля 2019

Я сделал несколько изменений.Текст теперь центрирован вокруг центра элемента svg.

Я использую JavaScript для вычисления длины текста и изменения размера текста, если он шире, чем 350 единиц.Вы можете решить, что это максимальное значение 350 основывается на ширине .st1 прямоугольника. 

// 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>

ОБНОВЛЕНИЕ

Это работает и в Edge и IE: вместо dominant-baseline="middle" я использую svg transformперевести текст в центр.

// 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>
...