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

Question

所以我制作了一个 Illustrator SVG 作为我正在设计的网站中 headers 的背景。我正在尝试找到一种方法来根据其中的文本动态调整此背景 SVG 的大小。我已经使用了 lengthAdjust="spacingAndGlyphs"，但是，如果是较长的行，我输入的一些文本会变得相当压扁，如果是较短的文本行，则会被拉伸。我在谷歌上搜索了几个小时的解决方案无济于事（我可能已经在其他堆栈溢出页面上找到了一些解决方案，但是，我似乎无法让它们在我的情况下工作。再一次，我是 [=21 中的 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：而不是 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>

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

Stretching a complex SVG based on text within it

html

svg

font-size

stretch

更新