Question

因此，我制作了Illustrator SVG用作我正在设计的网站中标题的背景。我试图找到一种方法，可以根据其中的文本动态调整此背景SVG的大小。我已经使用过lengthAdjust =“ spacingAndGlyphs”，但是，如果输入的文本较长，则输入会变得很狭窄；如果输入的文本较短，则会被拉伸。我已经在Google上搜索了数小时的解决方案，但无济于事（我可能在其他堆栈溢出页面上找到了一些解决方案，但是，我似乎无法使它们在我的情况下起作用。然后，再次介绍html页面中的svg，因此也许是由于我的无知使我无法理解它们。我也欢迎其他不涉及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>

Answer 1

我做了一些更改。现在，文本位于svg元素的中心。

我正在使用JavaScript计算文本的长度，并在文本宽于350个单位时调整其大小。您可以根据.st1矩形的宽度决定这个最大值350。

// 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：我使用svg dominant-baseline="middle"而不是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>

根据其中的文本拉伸复杂的SVG

1 个答案:

更新